CODEWITHSUNDEEP
htmlcss
Alan V K
Alan V K

Reputation: 109

Hidden (opacity 0) image triggers link on hover (not wanted)

Please see: https://codepen.io/alanvkarlik/pen/BYzYoY

<div class="hover_img">
<a class="hover_link" href="x">
Title
<span>
<img src="image.jpg" width="100%"/>
</span>
</a>
</div>

and css:

.hover_img span {
  z-index:-1;
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 400ms ease-in-out;
}
.hover_img a:hover span {
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

basically if you go to my site, and hover below last link "Do Graphic Designers Need To Be Human?" the image will still show up because it's "hidden" underneath, moving mouse even lower triggers another image/link

I'm not sure if I can simplify the code somehow to make it work? All I want is for the image to show up when the mouse is hovering the link ONLY, not the area around it

Upvotes: 2

Views: 249

Answers (2)

mpro
mpro

Reputation: 15040

Adding just display: none to .hover_img span should helps a bit:

.hover_img span {
  display: none;
  z-index:-1;
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 400ms ease-in-out;
}

Upvotes: 1

marhyno
marhyno

Reputation: 699

I tried your code, I was able to do it but animation is gone now. Hopefully you will be able to resolve it.

/* PROJECTS LINKS + BACKGROUND */
.hover_link > span { display: none; }
}

.hover_link {
  transition: 0.3s;
  text-decoration: none;
  padding: 0 3px;
  background-color: #5544ee;
  color: #000;
  padding: 0px 3px;
  text-decoration: none;
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(85,68,238,0) 20%,rgba(85,68,238,1) 21%,rgba(85,68,238,1) 73%,rgba(85,68,238,0) 74%,rgba(255,255,255,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(85,68,238,0) 20%,rgba(85,68,238,1) 21%,rgba(85,68,238,1) 72%,rgba(85,68,238,0) 72%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(85,68,238,0) 20%,rgba(85,68,238,1) 21%,rgba(85,68,238,1) 73%,rgba(85,68,238,0) 74%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

Upvotes: 0

Related Questions