CSS3 Image rotate overlay’s over my text

1 Views

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?

Read More

JS Fiddle: http://bit.ly/1b9bpiJ

Dev Site: http://briggs.honeycombsites.com/

Post Views: 1

Related posts

Leave a Reply

2 comments

  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

  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">
    <a href="#"><span>Contact Us</span>1.800 444.1515</a>
</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