user7074716 user7074716 - 1 month ago 5
CSS Question

Image as link in list

I want to be able to go to Google when I click on the image that is within class1. Any help would be appreciated.
I have this in my html:

<div class="one">
<ul class="two">
<li class="class1"><a href="www.google.com"></a></li>
<li class="class2"><a href="www.google.com"></a></li>
</ul>
</div>


I have this in my css:

.class1 {
background-image:url(image/url.png);
background-repeat: no-repeat;
}

.class1:hover {
background-image:url(imagehover/url.png);
background-repeat: no-repeat;
}

Answer

Here you go

ul li {
        list-style: none;
    }
    ul li a{
        display: block;
        height: 90px;
        width: 125px;
        cursor: pointer;
        border:1px solid #ddd;
    }
    .class1 {
       background-image:url('https://cdn1.iconfinder.com/data/icons/company-identity/100/Google_2015_logo-128.png');
       background-repeat: no-repeat;
    }

     .class2 {
       background-image:url('https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/facebook-128.png');
       background-repeat: no-repeat;
    }
<div class="one">
        <ul class="two">
            <li><a href="https://www.google.com" class="class1" target="blank"></a></li>
            <li><a href="https://www.facebook.com" class="class2" target="blank"></a></li>
        </ul>
    </div>

Comments