CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Prathamesh Prabhudesai
Prathamesh Prabhudesai

Reputation: 67

Artistic Text Below Image on Hover

I have some social icons. And they rotate 360 degrees about the center point on hover. I want to place text below those icons on hover. I am not sure how to do it.

Currently I have:

<center>
    <div class="ol-md-3 col-md-offset-5 text-center ">
    <a class="inline_block" href="#" target="_blank"><div class="social-roll linkedin"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/linkedin.png?raw=true" width=48 height=48/></div></a>
  <a class="inline_block" href="#" target="_blank"><div class="social-roll facebook"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/facebook.png?raw=true" width=48 height=48/></div></a>
  <a class="inline_block" href="#" target="_blank"><div class="social-roll github"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/github.png?raw=true" width=48 height=48/></div></a>
  <a class="inline_block" href="#" target="_blank"><div class="social-roll email"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/email.png?raw=true" width=48 height=48/></div></a>
  <a class="inline_block" href="#" target="_blank"><div class="social-roll skype"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/skype.png?raw=true" width=48 height=48/></div></a>
  <a class="inline_block" href="#" target="_blank"><div class="social-roll soundcloud"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/soundcloud.png?raw=true" width=48 height=48/></div></a>
  <a class="inline_block" href="#" target="_blank"><div class="social-roll spotify"><img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/spotify.png?raw=true" width=48 height=48/></div></a>
</div>
</center>

<style>
.inline_block{
   display: inline-block;;
 }

.social-roll {
    margin: 7px;
    float: left;
    border-radius: 50%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.social-roll.facebook:hover {
   background-color: rgba(255,255,255,0.8);
 box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
}


.social-roll.linkedin:hover {
   background-color: rgba(255,255,255,0.8);
 box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
   transform:rotate(360deg);
}

.social-roll.github:hover {
background-color: rgba(255,255,255,0.8);
box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

.social-roll.email:hover {
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
  }

.social-roll.skype:hover {
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
 }

.social-roll.soundcloud:hover {
  background-color: rgba(255,255,255,0.8);
 box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 transform:rotate(360deg);
}

.social-roll.spotify:hover {
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
  transform:rotate(360deg);
 }
    </style>

Here is the example: https://jsfiddle.net/prathprabhudesai/ga2evj7a/

I want a text to appear below the icon. Shown in the picture below. Text Below Icon

Can someone help me. Thanks in advance.

Upvotes: 3

Views: 147

Answers (1)

Igor S Om
Igor S Om

Reputation: 745

First let's say that you don't actually need to replicate the :hover css for each single button, if the effect is always the same, as it seems, since the css style will be applied only to the elements that currently has the state :hover, so I cleaned up a bit your css removing some unnecessary lines.

Moreover, since you have to add a new element (the text) and you want it to change style while you pass over the icon, I wrapped all into a parent element, giving it a class named 'social-group'.

I removed some icons just to make the code look cleaner. You can put them back following the example. You may also want to apply some style to the '.social-text' class.

<style>
.inline_block{
   display: inline-block;;
 }

.social-roll {
    margin: 7px;
    float: left;
    border-radius: 50%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.social-group:hover .social-roll {
   background-color: rgba(255,255,255,0.8);
   box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
}

.social-text {
    visibility: hidden;
}

.social-group:hover .social-text {
    visibility: visible;
}

</style>


<center>
    <div class="ol-md-3 col-md-offset-5 text-center ">
        <a class="inline_block social-group" href="#" target="_blank">
            <div class="social-roll linkedin">
                <img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/linkedin.png?raw=true" width=48 height=48/>
            </div>
            <div class="social-text">Linkedin</div>
        </a>
        <a class="inline_block social-group" href="#" target="_blank">
            <div class="social-roll facebook">
                <img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/facebook.png?raw=true" width=48 height=48/>
            </div>
            <div class="social-text">Facebook</div>
        </a>
    </div>
</center>

Upvotes: 5

Related Questions