Create markup for 'hover' effect

Question

I have container for video which looks like this: screenshot1

HTML:

  <div class="video-item col-xs-6 col-md-4">
      <div class="opacity-layer"></div>
      <div class="play-block">
          <div class="landing-play-button"></div>
      </div>
      <img src="image.jpg">
  </div>

CSS:

.opacity-layer{
    position: absolute;
    background-color: white;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.play-block{
    position: absolute;
    width: 90%;
    height: 55%;
    border: solid white 4px;
    margin: 5% 5%;
    opacity: 0.5;
    /*background-color: #f5f5f5;*/
    cursor: pointer;
}

.play-block:hover{
    background-color: transparent;
}

and on "hover" I want remove 'opacity-layer' only within 'play-block', something like here: screenshot2.

Assuming that the 'opacity-layer' covers the whole 'video-item' div...it's not possible to remove it from part of that div. — Paulie_D
– Paulie_D, Commented Apr 19, 2016 at 11:28
Yes, you are right. I need advice how to correct my markup for effect like on second screenshot. @Paulie_D — Pavlo
– Pavlo, Commented Apr 19, 2016 at 11:35
You'd need two overlays...one covering the top section, another covering the bottom. If you have a demo it would be simpler — Paulie_D
– Paulie_D, Commented Apr 19, 2016 at 11:44

Alex · Accepted Answer · 2016-04-19 11:54:33Z

1

Try using multiple borders or outline, then fade out the background-color on hover. I used outline for this example - https://jsfiddle.net/ea90qjae/

It's by now means the finished solution, but it should give you a starter for ten

answered Apr 19, 2016 at 11:54

Alex

9,0612 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marco Hengstenberg · Accepted Answer · 2016-04-19 11:41:02Z

1

If you want the opacity-layer to be invisible on :hover then I'd suggest the easiest way:

.video-item:hover .opacity-layer {
  opacity: 0;
}

Will that solve the issue?

Edit: Here's an idea:

<div class="video-item col-xs-6 col-md-4">
  <div class="play-block">
      <div class="covers-only-play-block">
          <div class="landing-play-button"></div>
      </div>
  </div>
  <img src="image.jpg">
</div>

With the following CSS:

.covers-only-play-block {
  position: relative;
  z-index: 1; /* 1 is a placeholder, it needs to be lower than the one for the play button, though */
  background: #fff;
  opacity: .5;
}
.video-item:hover .covers-only-play-block {
  opacity: 0;
}

edited Apr 19, 2016 at 11:41

answered Apr 19, 2016 at 11:26

Marco Hengstenberg

8645 silver badges15 bronze badges

2 Comments

Pavlo Over a year ago

Not exactly what I need. As you can see on second screenshot - I don't want remove all 'opacity' , only within 'play-block'.

Marco Hengstenberg Over a year ago

Edited my answer @Pasha Does that work for you then?

Itay Grudev · Accepted Answer · 2016-04-19 12:04:02Z

1

Use:

.play-block:hover {
    background-color: transparent;
    opacity:1;
}

edited Apr 19, 2016 at 12:04

Itay Grudev

7,5544 gold badges60 silver badges97 bronze badges

answered Apr 19, 2016 at 11:22

Devidas Kadam

9549 silver badges19 bronze badges

Collectives™ on Stack Overflow

Create markup for 'hover' effect

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related