Something Like This?
Here is the problem:
.frame:hover > .button > img#add-to-basket1 { }
This means that you are referencing img#add-to-basket1 which is inside of .button based on your code. But .button and img#add-to-basket1 refers to the same element. so you can remove either of them. in my case I just removed .button.
/*Testing buton and id add to basket without the anchor . so far not working*/
/* <!-- test of https://codepen.io/anon/pen/bENBGW --> */
.frame {
float: left;
width: 300px;
min-height: 50px;
background-color: ##00F;
margin: 0px 10px;
border: 1px solid black;
}
.frame:hover > .info > p{
font-size: 14px;
color:green;
}
.frame:hover > img#add-to-basket1 {
background-position: 42px 0px;
}
/* also tried
.frame:hover > img#add-to-basket1 { background-position: 42px 0px;} and
.frame:hover > #add-to-basket1 { background-position: 42px 0px;}
*/
.info {
float: left;
max-width: 220px;
height: auto;
background-color: none;
margin-left: 20px;
vertical-align: middle;
line-height: 42px;
}
.info p {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
font-style: italic;
color: #8F8F8F;
margin-top: 5px;
}
img.button {
border-radius: 100%;
display: inline-block;
background-image: url('https://ggeddes.com/_media/_media/Button1_6Square.png');
height: 42px; width: 42px;
background-size: 85px 250px;
text-indent: -9999px;
line-height:42px;
float: left;
}
#add-to-basket1 { background-position: 0px 0px;}
<div class="frame">
<img class="button" id="add-to-basket1"/>
<div class="info">
<p>Preparing Your Home For Showing</p>
</div>
</div>
I have a <button> that is css formatted with a png as background-image and that has the width and height limited. Also a <p> with text. This is actually changing as expected On :hover but the button image is not. On :hover I have the css set to change the background-position to a different part of the larger image.
I have picked up some code from other answers here on stack overflow and tried to make them fit what I need. I have actually tried for days to make this work and deleted a lot of code in the process. I created a jsfiddle to show what is working and what isn’t. Sorry for probably asking the same thing as others.
jsfiddle Hope I did that right.
/*Testing buton and id add to basket without the anchor . so far not working*/
/* <!-- test of https://codepen.io/anon/pen/bENBGW --> */
.frame {
float: left;
width: 300px;
min-height: 50px;
background-color: ##00F;
margin: 0px 10px;
border: 1px solid black;
}
.frame:hover > .info > p{
font-size: 14px;
color:green;
}
.frame:hover > .button > img#add-to-basket1 {
background-position: 42px 0px;
}
/* also tried
.frame:hover > img#add-to-basket1 { background-position: 42px 0px;} and
.frame:hover > #add-to-basket1 { background-position: 42px 0px;}
*/
.info {
float: left;
max-width: 220px;
height: auto;
background-color: none;
margin-left: 20px;
vertical-align: middle;
line-height: 42px;
}
.info p {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
font-style: italic;
color: #8F8F8F;
margin-top: 5px;
}
img.button {
border-radius: 100%;
display: inline-block;
background-image: url('https://ggeddes.com/_media/_media/Button1_6Square.png');
height: 42px; width: 42px;
background-size: 85px 250px;
text-indent: -9999px;
line-height:42px;
float: left;
}
#add-to-basket1 { background-position: 0px 0px;}
<div class="frame">
<img class="button" id="add-to-basket1"/>
<div class="info">
<p>Preparing Your Home For Showing</p>
</div>
</div>
This is exactly what I wanted. I thought I had tried all of the different classes and ids. Thank you so much.
I am Glad I was able to help @geddeca. Good luck!
