B. Godoak B. Godoak - 3 months ago 18
Sass (Sass) Question

SCSS/CSS hover on image

I want to hover on a box and transform scale (1.1) of image. But the problem is I have a text in front of image. So if I hover on the text It's not working

I want to hover anywhere on the box and scale the image.

And this is my code

HTML

<div class="col-md-12 club-index__box">
<a href="{{ path('toro_web_club_show', {'id': r.id}) }}">
<div class="club-index__box--nation">
<div class="club-index__box--image">{{ toro_image(r.coverImage, '1050x250') }}</div>
<div class="club-index__box--text">
<span class="club-index__box--title">{{ r.name }}</span>
<span class="club-index__box--sub-title">ทีมชาติไทย 2016 , ผู้จัดการทีม , รายชื่อผู้เล่น</span>
</div>
</div>
</a>
</div>


SCSS

.club-index {
&__box {
margin-top: 30px;
&--nation {
position: relative;
display: block;
width: 100%;
height: 250px;
margin: 0 auto;
background-color: #18202d;
text-align: center;
overflow: hidden;
}
&--image {
position: absolute;
transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
&:hover {
transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
}
&--text {
position: relative;
z-index: 1;
}
&--title {
padding-top: 75px;
font-size: 30px;
color: #fff;
text-align: center;
&:hover{
transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
}
&--sub-title {
margin-top: 20px;
font-size: 16px;
color: #fff;
text-align: center;
&:hover{
transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);}}}}
}
}
}
}

Answer

instead of scaling the image on hover of image scale the image on hover of its parent element which includes both image and text

 &--nation:hover > image {
          //scale to 1.1
 }

EDIT: Your code will be like

    .club-index {
       &__box {
           margin-top: 30px;
           &--nation {
               position: relative;
               display: block;
               width: 100%;
               height: 250px;
               margin: 0 auto;
               background-color: #18202d;
               text-align: center;
               overflow: hidden;

           }
           &--nation:hover > &--image {
                   transform: scale(1.1);
                   -moz-transform: scale(1.1);
                   -webkit-transform: scale(1.1);
                   -o-transform: scale(1.1);
               }
           &--image {
               position: absolute;
               transition: all 1s ease-in-out 0s;
               -moz-transition: all 1s ease-in-out 0s;
               -webkit-transition: all 1s ease-in-out 0s;
               -o-transition: all 1s ease-in-out 0s;
           }
Comments