0

I have made a hover effect for one image.

Then i have added a play-button image on top of that image.

When i hover over the background image it adds a tint effect, but when i hover over the play-button hover effect is gone...

Any ideas on how to make this work ?

Here is the codepen: http://codepen.io/giorgiomartini/pen/waKbde

HTML:

<div class="col-xs-12 col-md-6 img-item">
  <a href=" https://booming-games.com/games/play_demo/danger_underwater/hd?locale=en ">
    <div class="wrap">
      <figure class="tint">
        <img class="image" src="https://booming-games.com/dangerUnderwater/images/Desktop_Frame.jpg">
      </figure>
    </div>
    <img class="play" src="http://www.clipartbest.com/cliparts/Mdi/7gq/Mdi7gq5c9.png" >
  </a>
</div>

CSS:

.play  {
  position: absolute;
  width: 20%;
  top: 0;
  left: 0;
  margin-left: 39%;
  margin-top: 20%;
}

.wrap {
    overflow: hidden;
    width: 840px;
    margin: auto;
    max-width: 100%;
  }

  .tint {
    overflow: hidden;
    float: left;
    background: blue;
    /*margin: 0 20px 20px 0;*/
    background: #F43C4A;
  }

  .image{
    max-width: 100%;
    float: left;
    display: block;
    -moz-transition: opacity .3s linear;
    -webkit-transition: opacity .3s linear;
    -ms-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    transition: opacity .3s linear;
  }

  .image:hover {
    opacity: 0.5;
    cursor: pointer;
  }

Thanks!

  • Maybe this will help you: http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered – Maharkus May 07 '15 at 15:19
  • 1
    if you place the play button within the same parent and above the other image in the code, you could use `playimage:hover + img {...}`. – Callum. May 07 '15 at 15:19
  • @Callum. thanks, but what do you mean by "+" ? can you be more explicit .. thx! :) –  May 07 '15 at 15:27
  • The + selector in css selects elements which are placed immediately after the first element ^^ – Callum. May 07 '15 at 15:33
  • Ah great! and wht exaclty should i write inside the img{...} ? I dont have a img selector in my css , i have a image class though... –  May 07 '15 at 15:38

0 Answers0