CODEWITHSUNDEEP
htmlcss
storks
storks

Reputation: 429

css link image clickable only one part

I want to click only on left side where is letter "F" and other section to make not clickable. I am trying with css class diver but not work.

Html

<a href="https://www.google.com" class="diver" target="_blank">
<div style="margin-top:0px;">
<img src="http://www.upslike.net/imgdb/facebook-4846a5.png" width="30%" height="60px">
</div>
</a>

CSS

<style>
.diver a{
    display:block;
    width:100px;
    height:60px;
}
</style>

CodePen

Upvotes: 0

Views: 616

Answers (1)

Paulie_D
Paulie_D

Reputation: 115296

If the image must be in the HTML.

Note: The "universal reset" (the * section) have an effect on elements outside the scope of the current question. Headers, paragraphs and lists spring to mind. 

* {
    margin: 0;
    padding: 0;
}

.diver-wrap {
    display: inline-block;
    position: relative;
    margin: 1em;
}
a.diver {
    position: absolute;
    top:0;
    left: 0;
    width:100px;
    height:60px;
    background: rgba(0,0,0,.25); /* for visual reference */
}
<div class="diver-wrap">
    <img src="http://www.upslike.net/imgdb/facebook-4846a5.png" alt=""/>
<a href="https://www.google.com" class="diver"></a>
</div>

Upvotes: 1

Related Questions