I am in need of assistance or guidance in the right direction.
My goal is to create an effect where an image grows when hovering over its parent DIV, while also having the background of the caption area slide in instead of fading in.
In the example provided below, you will see that the entire panel increases in size. If I use the .grow style, the image will only grow when hovered over directly, which is not exactly what I'm looking for. I want more of an overflow hidden effect.
This is the closest solution I could find but it's still not quite right.
Any help would be greatly appreciated!
<!-- HTML -->
<div class="content container ">
<div class="row">
<a href="#" id="panel-effect">
<div class=" front-panel col-lg-3 col-md-3 col-sm-12">
<div class="row">
<div class="grow img-panel img-area-height" id="img1">
</div>
<div class="panel-txt-area">
<p>blaaaaa</p>
<div class="panel-title"><h3>TITLE »</h3></div>
</div>
</div>
</div>
</a>
<a href="#">
<div class=" front-panel col-lg-3 col-md-3 col-sm-12">
<div class="row">
<div class="img-panel img-area-height" id="img1">
</div>
<div class="panel-txt-area">
<p>blaaaaa</p>
<div class="panel-title"><h3>TITLE »</h3></div>
</div>
</div>
</div>
</a>
<a href="#">
<div class=" front-panel col-lg-3 col-md-3 col-sm-12">
<div class="row">
<div class="img-panel img-area-height" id="img1">
</div>
<div class="panel-txt-area">
<p>blaaaaa</p>
<div class="panel-title"><h3>TITLE »</h3></div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--container-->
<div style="margin-bottom:500px">
<!--SPACER-->
</div>
<!-- CSS -->
.container{
width:1270px;
}
body{
background-color:#adafaf;
}
.front-panel{margin:0px 10px 10px 0px;}
.img-area-height{
height:250px;
}
.panel-txt-area {
height:180px;
background-color:#fff;
color:#000;
padding:10px;
position:relative;
}
.panel-txt-area:hover{
background-color:#9eab05;
color:#fff;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.5s ease-in-out;
}
.panel-title{position:absolute;bottom:0;}
.img-panel {
background-size:cover;
}
#img1{background-image: url(http://lorempixel.com/image_output/city-q-c-640-480-9.jpg);}
/*
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }*/
#panel-effect{
display: block;
/*width: 300px;
height: 300px;*/
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
#panel-effect:hover{
-webkit-transform: scale(1.05,1.07);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1.05,1.07);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
position: relative;
z-index: 99;
}