CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Richa
Richa

Reputation: 3289

Applying two hover effects on Div

I have the following HTML code for image and text

<div class="subcontainer1">
    <img src="a.png" alt="" class="imgcolumn">
     <h3 class="header3">Hello</h3>
</div>

In this content is placed above image.

So i was trying to apply two different css effect on single hover.

Like when i hover over div having class subcontainer1 the image should shrink and text should grow.

CSS for shrink and grow

.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover, .grow:focus, .grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Shrink */
.shrink {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

Now is it possible to do so? Or am i just expecting too much from hover??

Upvotes: 0

Views: 169

Answers (3)

SouravMoitra
SouravMoitra

Reputation: 63

The .grow and .shrink is not present in html so in order to make it work you have you have to use

   .subcontainer:hover{
     //css rules
    }

Upvotes: 0

Mohammad Kermani
Mohammad Kermani

Reputation: 5396

you should write like this, for example when .subcontainer1 hover add an style to img or h3 

 .subcontainer1:hover img{
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }


    .subcontainer1:hover .header3{
       /*Your style*/
    }

DEMO

Upvotes: 0

Andreas Eriksson
Andreas Eriksson

Reputation: 9027

Something like this?

.subcontainer1:hover img { transform: scale(1.1); }
.subcontainer1:hover h3 { transform: scale(0.9); }

Fiddle: http://jsfiddle.net/JzgF5/

Upvotes: 2

Related Questions