CODEWITHSUNDEEP
htmlcss
TheOrangeRemix
TheOrangeRemix

Reputation: 85

How to alter hover effects for image button and embedded text?

I have a button with embedded text inside the button and when hovering over the button, I would like it to display the image as well as change the color of the text.

Here is my code: http://jsfiddle.net/2qCY7/

HTML:

<a href="http://www.webpage.com/albums">
<div class="album-button">
<div class="album-text">Photo Albums</div>
</div></a>

CSS:

 .album-button {
width: 230px;
height: 230px;
border: 5px solid white;
overflow: hidden;
background: #EC580E;
display:inline-block;
}

.album-text {
font-size: 24px;
color:#FFFFFF;
top: 110px;
height: 80px;
width: 170px;
margin-left:50px;
margin-top:170px;
}


.album-button:hover {
background-image:url('http://www.photobookgirl.com/blog/wp-content/uploads/2010/06/LargeAssembledAlbumMpix.jpg');
background-size:cover;
background-position:-30px;
-webkit-transition: 400ms;
-moz-transition: 400ms;
-o-transition: 400ms;
-ms-transition: 400ms;
transition: 400ms;
}

.album-text:hover {
  color:#000000;
}

Right now, I can only change the color of the text by hovering over the text, specifically, but how do you change both elements by hovering over the image? BTW, the image used is an example only for this posting.

Upvotes: 1

Views: 999

Answers (2)

Jon P
Jon P

Reputation: 19772

You can do this with a lot less HTML and only two classes:

<a href="http://www.webpage.com/albums" class="album-button">Photo Albums</a>

CSS:

.album-button {
    width: 230px;
    height: 60px;
    border: 5px solid white;
    overflow: hidden;
    background: #EC580E;
    display:inline-block;
    font-size: 24px;
    color:#FFFFFF;
    text-align:center;
    padding-top:170px;
    text-decoration:none;
}



.album-button:hover {
    background-image:url('http://www.photobookgirl.com/blog/wp-content/uploads/2010/06/LargeAssembledAlbumMpix.jpg');
    background-size:cover;
    background-position:-30px;
    -webkit-transition: 400ms;
    -moz-transition: 400ms;
    -o-transition: 400ms;
    -ms-transition: 400ms;
    transition: 400ms;
    color:#000000;
}

Demo

Upvotes: 0

Hristo Valkanov
Hristo Valkanov

Reputation: 1687

Try changing this:

.album-text:hover {
  color:#000000;
}

to this:

.album-button:hover .album-text{
  color:#000000;
}

Here's demo.

Upvotes: 4

Related Questions