0

I put a vignetting effect on my photo posts whenever you hover on them, but when I hover on the buttons on top of the photos, the vignette is gone. How do I make this work?

Here's the vignetting code I'm using:

.shadow {
    position:relative;
    display:block;
    -webkit-transition:all.5s linear;
}

.shadow img {
    display:block;
    -webkit-transition:all.5s linear;
}

.shadow::before {
    -webkit-box-shadow:inset 0 0 0px #000;
    -moz-box-shadow:inset 0 0 0px #000;
    box-shadow:inset 0 0 0px #000;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content:"";
    -webkit-transition:all.5s ease-out;
    -moz-transition:all.5s ease-out;
    transition:all.5s ease-out;
}

.shadow:hover::before {
    -webkit-box-shadow:inset 0 0 250px #000;
    -moz-box-shadow:inset 0 0 250px #000;
    box-shadow:inset 0 0 250px #000;
    -webkit-transition:all.8s ease-in;
    -moz-transition:all.8s ease-in;
    transition:all.8s ease-in;
}

And here is my Fiddle

Please help.

Tasos K.
  • 7,669
  • 7
  • 38
  • 57
Ely
  • 21
  • 9

4 Answers4

0

It is not possible with pure css to style a parent element by hovering the child element.

See How to style the parent element when hovering a child element?

Or you could change your html layout to get it working.

Community
  • 1
  • 1
TeeDeJee
  • 3,556
  • 1
  • 14
  • 24
0

Place button before image and use css selector .button:hover+.photo .shadow::before and .button:hover+.button+.photo .shadow::before

New HTML

<div class="entry">
    <div class="button">
        <div class="permalink"><a href=""><img src="http://static.tumblr.com/27apcde/7yjmrnwpi/pl.png"></a>
        </div>
    </div>
    <div class="button">
        <div class="reblog"><a href=""><img src="http://static.tumblr.com/27apcde/xpBmrnwv5/rb.png"></a>

        </div>
    </div>
    <div class="photo">
        <center>
            <div class="shadow">
                <img src="https://40.media.tumblr.com/fdd926af3420367b603b70dc3fed196e/tumblr_mxrdbq86PY1r9a23uo1_500.jpg" />
            </div>
        </center>
    </div>
</div>

New CSS 

.shadow:hover::before,
.button:hover+.photo .shadow::before,
.button:hover+.button+.photo .shadow::before{
    -webkit-box-shadow:inset 0 0 250px #000;
    -moz-box-shadow:inset 0 0 250px #000;
    box-shadow:inset 0 0 250px #000;
    -webkit-transition:all.8s ease-in;
    -moz-transition:all.8s ease-in;
    transition:all.8s ease-in;
}
 .button {
    position:absolute;
    background:#;
    left:21px;
    bottom:33px;
    z-index:10;
}

DEMO

Anon
  • 2,774
  • 11
  • 18
  • Some small repositioning required in the demo, compared to the original, but other than that I think this is a brilliant answer! I didn't realise CSS could operate like that. – Hopeful Llama Sep 26 '14 at 09:34
  • This one actually worked, all I had to do was edit some margins. Thank you! – Ely Sep 26 '14 at 09:38
0

try to place button inside shadow

<div class="entry">
    <div class="photo">
        <center>
            <div class="shadow">
                <img src="https://40.media.tumblr.com/fdd926af3420367b603b70dc3fed196e/tumblr_mxrdbq86PY1r9a23uo1_500.jpg" />
                 <div class="button">
        <div class="reblog"><a href=""><img src="http://static.tumblr.com/27apcde/xpBmrnwv5/rb.png"></a>

        </div>
    </div>
    <div class="button">
        <div class="permalink"><a href=""><img src="http://static.tumblr.com/27apcde/7yjmrnwpi/pl.png"></a>
        </div>
    </div>
            </div>
        </center>
    </div>

</div>
himanshu
  • 1,704
  • 1
  • 9
  • 12
  • Hey thanks! I also used this, but the images inside the button didn't work so I made them backgrounds. – Ely Sep 26 '14 at 11:21
0

There should be some change in your HTML structure and CSS as well. Buttons should be inside .shadow element as you want to continue with hover of photo while hover on button too. For updates in HTML and CSS please follow my updated (http://jsfiddle.net/smvora_4u/pr85jeat/2/)

Sandip Vora
  • 163
  • 7