CODEWITHSUNDEEP
javascriptjqueryhtmlcss
YoiMCoding
YoiMCoding

Reputation: 75

how to fix issue with images link on hover?

so i have 3 images they all are using the same code with different style of course first image is on left second image is in middle and third is on right.

bottom: 10;
left: 0;
right: 0;
position: fixed;
text-align: center; 
margin: 0px auto;

okay so the issue i'm having is when you are to hover on the image it can only hover the pointer on either top part of the image but when hovering over the image on bottom then it detects no link at all.

sample of code for image I'm using 

<a href="/"><img style="width: 130px; height: 130px; border: 0px; display: inline;" src="img">
</a>

All of the images are different sizes but one the first image i resized the image to like 150px width and 100 width height then the hover start working but i want the image to be hover on 100px width and 50px height and when i do that it only hovers over right side of the image and this image is the first image on left. Second image i tried resizing but it only hovers on top of the image. any help will be appreciated :)

Upvotes: 2

Views: 175

Answers (2)

rajesh
rajesh

Reputation: 1485

I dont know exactly your need, from my understand you can do it as follow: Add this css styles and hover the image:

#img1 {
bottom: 10;
left:0;
right:0;
position: fixed;
text-align:center;
margin: 0px auto
z-index:1;
}

 #img1 img:hover {
width:100px !important;
height:50px !important;}

Fiddle:http://jsfiddle.net/1hwm3epj/16/

Upvotes: 0

Fahad Hasan
Fahad Hasan

Reputation: 10506

There's a problem in your CSS. All of your <div>'s containing the anchor tags and the images have a fixed position along with left: 0 which is why they are overlapping. You can achieve what you're trying to do like this, I've modified the HTML and added new CSS:

#images {
    text-align: center;
}

#images a:nth-child(2) {
display: inline-block;
float: left;
}

#images a:last-child {
display: inline-block;
float: right;
}
<div id="images"><a href="#"target="_blank"><img style="width: 100px; height: 100px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" /></a>
    <a href="#"target="_blank"><img style="width: 100px; height: 80px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" /></a>
    <a href="#"target="_blank"><img style="width: 100px; height: 80px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" /></a></div>

Upvotes: 1

Related Questions