CSS3 Image rotate overlay's over my text [closed] - html

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I'm trying to get a background image to rotate when I hover over it. But at the same time I want some link text over top of the picture to NOT rotate.
I have it semi working, but when the image rotates the text get's hidden behind it. and sometimes you will hover over the link, and the image doesn't rotate. Is there a way to accomplish this?
JS Fiddle: http://bit.ly/1b9bpiJ
Dev Site: http://briggs.honeycombsites.com/

Answer 1

A slight modification to the excellent answer of Zeaklous.
To avoid the counter-rotation of the text, do not rotate the base div. Place the background in a pseudo element and rotate this.
div.button {
width:130px;
height:130px;
position:relative;
float: left;
margin-right: 20px;
overflow:hidden;
}
div.button:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: url('http://briggs.honeycombsites.com//wp-content/themes/briggs/images/btn_contact.png');
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
z-index: -1;
}
.button:hover:after {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
div.button a {
color: #CFCAB4;
font-size: 24px;
line-height: 26px;
text-align: center;
text-shadow: 1px 1px 1px #333333;
width: 100%; height:80%;
text-transform: uppercase;
position:absolute;
top:50%; margin-top:-40%;
left:50%; margin-left:-50%;
}
div.button:hover a {
color: #fff;
}
div.button a span {
border-bottom: 1px solid #CFCAB4;
display: inline-block;
font-size: 12px;
line-height: normal;
margin-bottom: 7px;
text-shadow: none;
}
updated demo
In the above answer, I forgot the unprefied transform in the after
.button:hover:after {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
Also, for some reason, the design breaks in firefox and IE; the font of the span needs to be set a little bit higher:
edited demo

Answer 2

I understand why you set up your code this way, but transform has some interesting unintentional effects at times. In your case it's affecting the z-index somehow and I'm not sure exactly how to fix it
With that being said, here's how I'd do it, which is simpler to me. It involves putting the text inside the rotating element, but rotating the text in the opposite direction at the same time in order to keep it upright
/* Updated HTML */
<div class="button">
<span>Contact Us</span>1.800 444.1515
</div>
/* CSS */
div.button {
width:130px;
height:130px;
position:relative;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
float: left;
margin-right: 20px;
overflow:hidden;
background: url('wp-content/themes/briggs/images/btn_contact.png');
}
div.button:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
div.button a {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
color: #CFCAB4;
font-size: 24px;
line-height: 26px;
text-align: center;
text-shadow: 1px 1px 1px #333333;
width: 100%; height:80%;
text-transform: uppercase;
position:absolute;
top:50%; margin-top:-40%;
left:50%; margin-left:-50%;
}
div.button:hover a {
color: #fff;
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
}
div.button a span {
border-bottom: 1px solid #CFCAB4;
display: inline-block;
font-size: 12px;
line-height: normal;
margin-bottom: 7px;
text-shadow: none;
}
Demo here
Let me know if you have any questions about my method