Home/ Questions/Q 9177223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T17:16:28+00:00

I am making an animation with CSS and it’s almost done.Now i want that

  • 0

I am making an animation with CSS and it’s almost done.Now i want that area on which i have animated elements should say automatically “hover here”.
How can i do this with jquery?

I have my code here-

<!DOCTYPE html>
<html>
<head>
<style>
#D {
  background: #fff;
  height: 180px;
  position: justify;
border:1px dotted #ccc;

}

#S{
  font: 5em 'Bree Serif', Helvetica, sans-serif;
  margin: 50px;
  opacity: 0;
  text-transform: uppercase;
  position:absolute;
}
#S:nth-child(5) {
  -webkit-transition: all 2s ease-in-out ;
     -moz-transition: all 2s ease-in-out ;
       -o-transition: all 2s ease-in-out ;
      -ms-transition: all 2s ease-in-out ;
          transition: all 2s ease-in-out ;

}

#S:nth-child(4) {
  -webkit-transition: all 1s ease ;
     -moz-transition: all 1s ease ;
       -o-transition: all 1s ease ;
      -ms-transition: all 1s ease ;
          transition: all 1s ease ;
}

#S:nth-child(3) {
  -webkit-transition: all 2s ease ;
     -moz-transition: all 0.1s ease 0s ;
       -o-transition: all 0.1s ease ;
      -ms-transition: all 0.1s ease ;
          transition: all 1s ease  0s;
}

#S:nth-child(2) {
  -webkit-transition: all 1s ease ;
     -moz-transition: all 0.1s ease ;
       -o-transition: all 0.1s ease ;
      -ms-transition: all 0.1s ease ;
          transition: all 1s ease ;
}

#S:nth-child(1) {
  -webkit-transition: all 1s ease;
     -moz-transition: all 0.5s ease 0s;
       -o-transition: all 0.1s ease;
      -ms-transition: all 0.1s ease;
          transition: all 1s ease 0s;
}
#D:hover #S:nth-child(1) {
  opacity: 1;
  left: 50px;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
color:#ccc;
    text-shadow: 1px 4px 6px black;


}
#D:hover #S:nth-child(2) {
  opacity: 1;
  -webkit-transform: rotate(-360deg);
     -moz-transform: rotate(-360deg);
       -o-transform: rotate(-360deg);
      -ms-transform: rotate(-360deg);
          transform: rotate(-360deg);
}
#D:hover #S:nth-child(3) {
  opacity: 1;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
#D:hover #S:nth-child(4) {
  opacity: 1;

  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
#D:hover #S:nth-child(5) {
  opacity: 1;

  -webkit-transform: rotate(-360deg);
     -moz-transform: rotate(-360deg);
       -o-transform: rotate(-360deg);
      -ms-transform: rotate(-360deg);
          transform: rotate(-360deg); 


}

#D:hover #S:nth-child(6) {
  opacity: 1;

  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
#D:hover #S:nth-child(7) {
  opacity: 1;

  -webkit-transform: rotate(-360deg);
     -moz-transform: rotate(-360deg);
       -o-transform: rotate(-360deg);
      -ms-transform: rotate(-360deg);
          transform: rotate(-360deg);
}
#D:hover #S:nth-child(8) {
  opacity: 1;

  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}


#S:nth-child(6)
{
-webkit-transition: all 1s ease;
     -moz-transition: all 0.5s ease 0s;
       -o-transition: all 0.1s ease;
      -ms-transition: all 0.1s ease;
          transition: all 1s ease 0s;
}
#S:nth-child(7)
{
-webkit-transition: all 1s ease;
     -moz-transition: all 0.5s ease 0s;
       -o-transition: all 0.1s ease;
      -ms-transition: all 0.1s ease;
          transition: all 1s ease 0s;
}
#S:nth-child(8)
{
-webkit-transition: all 1s ease;
     -moz-transition: all 0.5s ease 0s;
       -o-transition: all 0.1s ease;
      -ms-transition: all 0.1s ease;
          transition: all 1s ease 0s;
font-size:10em;
margin-top:4px;
color:#ccc;
    text-shadow: 1px 4px 6px black;
}
#D:hover #S:nth-child(2) {
  left: 120px;
color:#ccc;
    text-shadow: 1px 4px 6px black;

}

#D:hover #S:nth-child(3) {
  left: 175px;
color:#ccc;
    text-shadow: 1px 4px 6px black;

}

#D:hover #S:nth-child(4) {
  left: 260px;
color:#ccc;
    text-shadow: 1px 4px 6px black;

}

#D:hover #S:nth-child(5) {
  left: 313px;
margin-top:20px;
font-size:8em;
color:#ccc;
    text-shadow: 1px 4px 6px black;


}

#D:hover #S:nth-child(6)
{left:390px;
color:#ccc;
    text-shadow: 1px 4px 6px black;

}


#D:hover #S:nth-child(7)
{
left:450px;
color:#ccc;
    text-shadow: 1px 4px 6px black;

}

#D:hover #S:nth-child(8)
{
left:500px;
color:#ccc;
    text-shadow: 1px 4px 6px black;

}
</style>
</head>
<body>
<div id="D">
 <span id="S">c</span><span  id="S">s</span><span  id="S">s</span><span  id="S">H</span><span  id="S" >()</span><span  id="S">V</span><span  id="S">E</span><span  id="S">R</span>
</div>
</body>
</html>

Demo here-
http://jsfiddle.net/stackmanoz/CeVgT/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add content: "hover here"

    #D {
  background: #fff;
  line-height: 180px;
  position: justify;
  border:1px dotted #ccc; text-align:center
}
#D:before {
content:"Hover here"; 
}

    DEMO

    Add #D:hover:before{ visibility:hidden } to hide the text on hover.

    DEMO 2

    • 0