This might be really easy for many people but I just can't do it as I am not a developer. I am trying to hover image on top of another. It works but when I hover I can still see the another image at the background. When I hover the two images (same size) overlay each other and give different color.
Here is the CSS code:
.votebutton {
text-align:center;
background: transparent;
width: 24px;
height: 25px;
overflow: hidden;
float: right;
margin: -21px -28px 0px 0px;
}
.votebutton a: {
}
.votebutton a:hover {
background-image: url(../img/thumbs.png);
position:relative;
display: inline;
z-index: 2;
top: 2;
height: 5px;
width: 10px;
}
HTML
<div id="vote" class="votebutton">{if $anonymous_vote eq "false" and $user_logged_in eq ""}
<a data-toggle="modal" href="#LoginModal" class="btn btn-mini {if $link_shakebox_currentuser_votes eq 1}btn-success{/if}">
{else} {if $link_shakebox_currentuser_votes eq 0}
here -- @Pinocchio --> I would really appreciate if someone from 'stackoverflow community' can help me out. Thanks.
Edit: Have updated the full code. Thanks.
Im not exactly sure what you are trying to achieve. If it is simply a hover affect for you link then using :hover should work as you are attempting.
Here is a fiddle that does a basic background hover change - http://jsfiddle.net/f6Frt/1
You simply set a background image for you link, then change that on hover.
.votebutton a {
padding: 20px;
background-image: url('http://twimgs.com/informationweek/galleries/automated/818/Slide-1-opening-image-38launch_full.jpg');
background-size: 100%;
}
.votebutton a:hover {
color:rgba(0,0,0,0);
background-image: url('http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2004/01/reull_vallis_-_hrsc_image_15_january_20042/9758050-3-eng-GB/Reull_Vallis_-_HRSC_image_15_January_2004_node_full_image.jpg');
background-size: 100%;
}
If you only want to show a background image on hover then omit the background from the css, as shown here http://jsfiddle.net/f6Frt/2
If you want to make the link text invisible then you can set its color to transparent:
.votebutton a:hover{color:rgba(0,0,0,0);}
shown here - http://jsfiddle.net/f6Frt/3/
If you want to take it a step further, you could use jQuery to clear the html content on hover, shown here - http://jsfiddle.net/f6Frt/4/ - this will require some extra tweaking, but is a good start if you're new to jQuery.
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.