CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Elaine Byene
Elaine Byene

Reputation: 4142

Zoom effect on hover with image opacity

JSFIDDLE DEMO

I got this working for image zoom in with link on the entire div but without the opacity. The moment I add this code in line 14-16, it ceases to work for obvious reason:

  background-color: rgba(0,0,0,0.4);
  width: 100%;
  height: 100%;

HTML

<div class="zoom-group">
 <a class="zoom-link" href="#" >
   <div class="zoom-block">
    <img src="http://placehold.it/250x250" />
    <div class="zoom-text">
      Hello
    </div>
  </div>
 </a>
</div>

CSS:

.zoom-group{
  overflow:hidden;
  border: 1px solid #000000; 
  display: block; 
  position: relative; 
  text-align: center;
  height: 250px;
  width: 250px;
}
.zoom-text {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0,0,0,0.4);
  width: 100%;
  height: 100%;
}
.zoom-block img{
  max-width: 100%;
  -webkit-transition: all 1s ease; /* Safari and Chrome */
  -moz-transition: all 1s ease; /* Firefox */
  -ms-transition: all 1s ease; /* IE 9 */
  -o-transition: all 1s ease; /* Opera */
  transition: all 1s ease;
}
.zoom-link {
    display: block;
}
.zoom-block img:hover{
  -webkit-transform:scale(1.25); /* Safari and Chrome */
  -moz-transform:scale(1.25); /* Firefox */
  -ms-transform:scale(1.25); /* IE 9 */
  -o-transform:scale(1.25); /* Opera */
   transform:scale(1.25);
}

How should I make this work? I do need the opacity layer and the zoom-in functionality plus the entire div to be clickable.

Upvotes: 1

Views: 2021

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206669

The img:hover cannot happen cause of the overlaying DIV.
Target the overall parent instead and than traverse to the image:

Simply change your last statement from .zoom-block img:hover{ to .zoom-group:hover img{

.zoom-group{
  overflow:hidden;
  border: 1px solid #000000; 
  display: block; 
  position: relative; 
  text-align: center;
  height: 250px;
  width: 250px;
}
.zoom-text {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0,0,0,0.4);
  width: 100%;
  height: 100%;
}
.zoom-block img{
  max-width: 100%;
  -webkit-transition: all 1s ease; /* Safari and Chrome */
  -moz-transition: all 1s ease; /* Firefox */
  -ms-transition: all 1s ease; /* IE 9 */
  -o-transition: all 1s ease; /* Opera */
  transition: all 1s ease;
}
.zoom-link {
    display: block;
}
.zoom-group:hover img{  /**/
  -webkit-transform:scale(1.25); /* Safari and Chrome */
  -moz-transform:scale(1.25); /* Firefox */
  -ms-transform:scale(1.25); /* IE 9 */
  -o-transform:scale(1.25); /* Opera */
   transform:scale(1.25);
}
<div class="zoom-group">
 <a class="zoom-link" href="#" >
   <div class="zoom-block">
    <img src="http://placehold.it/250x250" />
    <div class="zoom-text">
      Hello
    </div>
  </div>
 </a>
</div>

Upvotes: 4

Related Questions