css - wanting to position the image that appears when a different image is hovered over -
so wanting change position of image appears hover effect. right image kind of goes under first image holds hover effect. struggling hardcore. have tried positioning , floating , simple left:90px or right:90px image shows upon hovering doesn't budge. here jsfiddle. images broken can jist. https://jsfiddle.net/k0fvbcno/ appreciated.
<div id="pain1"> <img class="pain1" src="images/painspot.png"> <img class="shoulder" src="images/shoulder.png"> </div> <div id="pain2"> <img class="pain2" src="images/painspot.png"> <img class="back" src="images/back.png"> </div> <div id="pain3"> <img class="pain3" src="images/painspot.png"> <img class="hip" src="images/hip.png"> </div> #pain1 { position: absolute; left: 710px; top: 220px; margin: auto; } .shoulder { display: none; } .pain1:hover + .shoulder { display: inline; } .pain1:hover{ border: 3px solid transparent; display: block; } #pain2 { position: absolute; left: 627px; top: 390px; margin: auto; } .back { display: none; } .pain2:hover + .back{ display: inline; } .pain2:hover{ border: 3px solid transparent; display: block; } #pain3 { position: absolute; left: 680px; top: 425px; } .hip { display: none; } .pain3:hover + .hip{ display: inline; } .pain3:hover { border: 3px solid transparent; display: block; }
i figured out finally. needed use position absolute , enabled me position image appeared when hover effect in use. thanks!
Comments
Post a Comment