documentations and links about the Hover effect

Asked

Viewed 56 times

0

hello staff would like to know if there is any material or documentation that helps me because I need to create an effect :hover similar to that of this site here

OBS: the effect :hover and the part of e-commerce where is the photos of the clothes and appears the buy button

html5 css3 bootstrap-3

  • It calls for Creative CSS3, several site q has very nice animation, see this http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index4.html and flw

1 answer

2


I copied from the site and lack icone, this does not load googleapis is copyright, use Fontawesome (http://fontawesome.io) can help. flw

<html>
<link href="http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/css/style4.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/css/demo.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
<body>
  <ul class="ca-menu">
    <li>
      <a href="#">
        <span class="ca-icon">F</span>
        <div class="ca-content">
          <h2 class="ca-main">Exceptional Service</h2>
          <h3 class="ca-sub">Personalized to your needs</h3>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="ca-icon">H</span>
        <div class="ca-content">
          <h2 class="ca-main">Creative Storytelling</h2>
          <h3 class="ca-sub">Advanced use of technology</h3>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="ca-icon">N</span>
        <div class="ca-content">
          <h2 class="ca-main">Infographical Education</h2>
          <h3 class="ca-sub">Understanding visually</h3>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="ca-icon">K</span>
        <div class="ca-content">
          <h2 class="ca-main">Sophisticated Team</h2>
          <h3 class="ca-sub">Professionals in action</h3>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="ca-icon">L</span>
        <div class="ca-content">
          <h2 class="ca-main">Unconditional Support</h2>
          <h3 class="ca-sub">24/7 for you needs</h3>
        </div>
      </a>
    </li>
  </ul>
</body></html>

Browser other questions tagged html5 css3 bootstrap-3

You are not signed in. Login or sign up in order to post.