Make div height fit hidden hover content

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 ;)

score 0 · Answer 1 · answered Mar 08 '18 at 07:15

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>

Yes! That works for the first one, but I just tried it on the next one, which doesn't have the same amount of text, and the boxes are now different heights AND different widths. You got me started down the table and table-cell path, but I've changed up how I do my overlay. Can you take a look at my fiddle using tables and cells and see if you can figure out why I can't get them to all be the same height? https://jsfiddle.net/graphicfixations/0vhsu5ce/ — graphicfixations, Mar 08 '18 at 15:10
I wrote it out further in a new question.https://stackoverflow.com/questions/49178088/equal-width-height-responsive-divs-with-hover-overlay — graphicfixations, Mar 08 '18 at 16:58

Make div height fit hidden hover content

1 Answers1