I am trying to create a layout where the div color matches the size of an image behind it, with the image moving slightly on hover. Here is my code:
<div class="row text-center about__gallery">
<div class="col-xs-12 col-sm-4">
<div class="about__gallery--first img">
<img />
</div>
</div>
.
.
.
</div>
Here is the SCSS for achieving this effect:
.about__gallery{
margin-top: 5%;
.img{
background-repeat:no-repeat;
background-size:cover;
width:70%;
height:230px;
margin-bottom: 15%;
img{
z-index: 3;
}
&:before {
position: absolute;
content: " ";
display: block;
width: 70%;
height: 230px;
background-color: $color-blue;
z-index: -100;
}
}
.
.
.
The result I am getting does not match what I want. Here is the full code snippet:
<div class="row text-center about__gallery">
<div class="col-xs-12 col-sm-4">
<div class="about__gallery--first img">
<img class="about__gallery__img--bg" />
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="about__gallery--second img">
<img class="about__gallery__img--bg" />
</div>
</div>
.
.
.
</div>
And here is the corrected SCSS code:
.about__gallery{
margin-top: 5%;
margin-bottom: 10%;
.img {
position: relative;
margin-bottom: 15%;
img {
width: 100%;
height: auto;
}
&:before {
position: absolute;
top: 0;
left: 0;
content: " ";
display: block;
width: 100%;
height: 100%;
background-color: $color-blue;
z-index: -100;
}
}
.about__gallery--first{
margin-left: 45%;
margin-bottom: auto;
img.about__gallery__img--bg{
content:url("../img/aboutus_pic1.png");
width: 100%;
}
}
.
.
.
You can view the final result here:RESULT
This is the design I am aiming for:GOAL
I have also tried adding hover effects which are not working as intended. Check out my codepen here.