I'm trying to make the title stay at the bottom of the hover box when a user hovers over it. I want the hover box to appear with the title always at the bottom, and close upwards from the title as the description covers the entire box. How can I achieve this without moving the title?
Below is the code snippet that illustrates the issue. When hovering over the h1 pictureTitle, it shifts towards the center due to the transform effect. What I want is for the title to remain at the bottom, and have the background of the hover box close upwards from the title, creating the illusion that the box is connected to the title.
.img__wrap {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.picture {
width: 200px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
opacity: 0;
transition: opacity 0.2s;
visibility:hidden;
}
.img__wrap:hover .img__description {
opacity: 1;
background:black;
height:100%;
visibility:visible;
transition-delay: 0.5s;
}
.img__wrap:hover .picture {
-moz-transform: scale(1.8);
-webkit-transform: scale(1.8);
transform: scale(1.8);
}
.pictureTitle{
background:black;
height:50px;
width:200px;
position:relative;
bottom:70px;
text-decoration:none;
color:red;
}<div class="img__wrap">
<a href="myHomePage.html" style="text-decoration:none;">
<img src="http://www.dogbreedplus.com/dog_names/images/puppy-dog-names.jpg" alt="hover box is supposed to encapsulate picture"
class="picture">
<p class="img__description">
This is where the hover box should pop up explaining the picture it should flow from title and cover the box.
</p>
<h1 class="pictureTitle">Title</h1>
</a>
</div>