Make div height fit hidden hover content - css

Question

I have created a series of image links for gallery categories. Each "button" has an image in the background and the gallery title overlaying this. I've set it to change out the background and the the title also changes to the gallery on hover using css, but the issue I'm running into is with the heights. The divs are loading to fit the titles, but then jump larger on mouseover to accommodate the description text. I need it to load large enough for the description text to fit nicely inside.
I want this to be responsive, so the text needs to be able to wrap, and the divs need to expand accordingly (and not jump heights on mouseover ever). So the height cannot be fixed heights or these will be way too tall when the divs are full width. I've got a single test one set up here
body{
font-family: Arial, Helvetica, sans-serif;
}
.item1{
width: auto;
display: table-cell;
}
a{
text-decoration:none;
}
.label1 {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
background: url('https://premium.wpmudev.org/blog/wp-content/uploads/2015/02/fullwidth-small.png') no-repeat;
background-position: center top;
background-size: 100% auto;
transition: background 0.5s ease;
}
.label1.success {
background-color: #FFFFFF;
}
.label1:hover {
width: auto;
height: auto;
padding-left: 20px;
padding-right: 20px;
background: #FFFFFF ;
background-position: center top;
background-size: 100% auto;
-webkit-box-shadow:inset 0px 0px 0px 4px #000000;
-moz-box-shadow:inset 0px 0px 0px 4px #000000;
box-shadow:inset 0px 0px 0px 4px #000000;
}
.item1 a p.new-label1 span{
position: relative;
content: 'NEW'
}
.item1:hover a p.new-label1 span{
display: none;
}
.item1:hover a p.new-label1:after{
content:attr(data-title);
white-space: normal !important;
overflow-wrap: normal;
font-size: 14px;
color: #000000;
}
<div style="width: 50%; display: table;">
<div class="item1">
<a href="">
<p class="label1 success new-label1" data-title="I Show up on Hover and have lots and lots of things to say and it takes up too much space" ><span class="align">New</span></p>
</a>
</div>
</div>
<div class="cleafix">
</div>
I'm also having an issue with transition effects between, but this issue is far more pressing. That said, if anyone wants to throw me a solution to that, I wouldn't mind at all ;)

Answer 1

I don't know this is exactly you want , but i made demo with my understanding .It might might help
body {
font-family: Arial, Helvetica, sans-serif;
}
.item1 {
width: auto;
display: table-cell;
}
a {
text-decoration: none;
}
.label1 {
position: relative;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
background: url('https://premium.wpmudev.org/blog/wp-content/uploads/2015/02/fullwidth-small.png') no-repeat;
background-position: center top;
background-size: cover;
transition: all .4s;
margin: 0;
}
.label1.success {
background-color: #fff;
}
.item1:hover .label1 {
}
.item1 a p.new-label1 span {
content: 'NEW';
position: absolute;
right: 0;
left: 0;
top: 50%;
transform: translateY(-50%);
opacity: 1;
visibility: visible;
transition: all .4s;
}
.item1:hover a p.new-label1 span {
opacity: 0;
visibility: hidden;
}
.item1 a p.new-label1:after {
content: attr(data-title);
background-color: transparent;
white-space: normal;
overflow-wrap: normal;
font-size: 14px;
color: #000;
padding: 20px 10px;
opacity: 0;
visibility: hidden;
display: block;
transition: all .4s;
}
.item1:hover a p.new-label1:after {
content: attr(data-title);
background-color: #fff;
opacity: 1;
visibility: visible;
-webkit-box-shadow: inset 0px 0px 0px 4px #000000;
-moz-box-shadow: inset 0px 0px 0px 4px #000000;
box-shadow: inset 0px 0px 0px 4px #000000;
}
<div style="width: 50%; display: table;">
<div class="item1">
<a href="">
<p class="label1 success new-label1" data-title="I Show up on Hover and have lots and lots of things to say and it takes up too much space" ><span class="align">New</span></p>
</a>
</div>
</div>
<div class="cleafix"></div>