Button hover, image darker

Question

I have a question how to do... hover on button and image will be darker? Something did not work ...

<!--- item -->
    <div class="col-lg-4">
        <div class="home-images">
            <img src="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/images/1.jpg">
        </div>
        <div class="home-images-content">
                    <h3>Lacobel</h3>
                    <a href="#" class="choose-home">Wybierz</a>
        </div>
    </div>
    <!--- item -->

Given your current HTML structure, this is not possible with CSS. — Paulie_D, Jun 16 '15 at 14:44
Possible duplicate - http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector — Paulie_D, Jun 16 '15 at 14:45
if change HTML structure - http://jsfiddle.net/soledar10/eycu2ebh/ — Dmitriy, Jun 16 '15 at 14:58

robjez · Answer 1 · 2015-06-16T15:17:18.203

There is a way to do this, with slight modification to your markup, and bit of css positioning.
Basically you could use css adjacent selector (+), which will select only the element that is immediately preceded by the former element.
In your case you want to place your <a> element immediately before <img>, to make this work:
HTML:

<!--- item -->
<div class="col-lg-4">
    <div class="home-images">
        <h3>Lacobel</h3>
        <a href="#" class="choose-home">Wybierz</a>
        <img src="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/images/1.jpg" />
    </div>
</div>
<!--- item -->

CSS:

.choose-home:hover + img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(grayscale.svg);
    /* Firefox 4+ */
    filter: gray;
    /* IE 6-9 */
    ;
}
.home-images h3 {
    color:#fff;
}
.choose-home {
    background:url('../images/ok_icon.png') #00b9ee no-repeat;
    background-position:10% 50%;
    padding-left:60px;
    padding-top:12px;
    height:45px;
    width: 125px;
    display:block;
    color:#fff;
    border-radius:5px;
    position: absolute;
    top: 300px;
}
.choose-home:hover {
    background:url('../images/ok_icon.png') #ff0042 no-repeat;
    background-position:10% 50%;
    display:block;
    text-decoration:none;
    color:#fff;
    border-radius:5px;
}
.choose-home:focus {
    text-decoration:none;
    color:#fff;
}

In your css you target element .choose-home:hover + img, and rest is positioning your link absolutely, below the image position: absolute; top: 300px;.

JSFiddle

Button hover, image darker

1 Answers1