Viktor February 2016

When hover on Image opacity doesn't apply

I have problem that when i hover on image its must use opacity + overlay text, and when text overlays the image opacity don't work correctly, what i did wrong in my code?

Here is CSS code

.grid {
  display: inline-block;
  position: relative;
  cursor: pointer;
  border: 2px solid  white;
  overflow: hidden; }

  .grid:hover .text-overlay {
    display: block; }

  .grid img {
    width: 308px; }

  .grid .img-grid {
    display: block;
    position: relative; }
    .grid .img-grid:hover {
      opacity: .5; }

  .grid .text-overlay {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 15px;
    z-index: 1;
    display: none;
    font-size: 18px; }

JSfiddle

Answers


fcalderan February 2016

Instead of

.grid .img-grid:hover { opacity: .5; }

you should use

.grid:hover .img-grid { opacity: .5; }

because when the caption appears you lose the hover state on the img element


See demo


Alexis February 2016

Just Change

 .grid .img-grid:hover {
      opacity: .5; 
}

to

.grid:hover img {
      opacity: .5; 
}

Post Status

Asked in February 2016
Viewed 1,280 times
Voted 8
Answered 2 times

Search




Leave an answer