CODEWITHSUNDEEP
htmlcsshover
João Victor
João Victor

Reputation: 639

Explain a hover example of a website

I'm learning web development and I'm trying to copy another site's layout to train my skills, but one point in this site i can't do =/

<div class="a">
<span>Teste</span>
<i>Teste Two</i>
</div>

html {
color:#fff;
}

.a {
width:200px;
height:200px;
background:#000;
text-align:center;
font-size:36px;
spanopacity:1;
transform:scale(1);
}

i {
top:50%;
left:50%;
position:absolute;
z-index:2;
}

I tried this but it doesn't work correctly.

In this website, the section has boxes with "Get Involved" and some icons too that change on hover.

I don't understand how that made this with pseudo-elements ::after and ::before

Upvotes: 3

Views: 186

Answers (4)

Bhavesh Chhatani
Bhavesh Chhatani

Reputation: 21

.a:hover
{
background-color:#f00;
transition: background-color 0.35s ease-out 0.1s;
}

Upvotes: 0

Rahul Kashyap
Rahul Kashyap

Reputation: 977

Here is the code which you have written. I just did little bit of editing here.

html{
  color:#000;
}
.a{
  width:200px;
  height:200px;
  background:#000;
  text-align:center;
  font-size:36px;
  overflow:hidden;
  cursor:pointer;
}
.b{
  width:200px;
  height:200px;  background:url('http://cdn.bigbangfish.com/quotes/nature-quotes-tumblr/nature-quotes-tumblr-8.jpg');
  background-size:cover;
  text-align:center;
  font-size:36px;
  margin:0 auto;
  transform: rotateZ(0) scale(1);
  transition: all 0.3s ease-in-out;
}
.icon{
  background-image:url('http://lifeandscience.org/keepers/files/2011/02/combo_plus_sign2.png');
  background-size:container;
  background-position:center;
  background-repeat:no-repeat;
  background-color: rgba(255, 255, 255, 0.29);
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
  opacity:0;
  transition: all 0.3s ease-in-out;
}
.a:hover .b,
.a:hover .icon{
-webkit-transform: rotateZ(-3deg) scale(1.2);
transform: rotateZ(-3deg) scale(1.2);
   opacity:1;
}
<div class="a">
  <div class="b">
    <span>EIQ</span>
    <i>SEHLOIRO</i>
    <div class="icon">
    </div>
  </div>
</div>

Here is the link for CodePen Click here

Upvotes: 1

kzhao14
kzhao14

Reputation: 2630

The second link does this with a transition CSS item on the second text:

-webkit-transition: -webkit-transform 0.5s ease,opacity 0.5s ease; 
-moz-transition: -moz-transform 0.5s ease,opacity 0.5s ease;
-ms-transition: transform 0.5s ease,opacity 0.5s ease;
transition: transform 0.5s ease,opacity 0.5s ease;

The transform tells the browser to transform the text in 0.5 seconds, and then transform the opacity in o.5 seconds to:

opacity: 1;

On the first element, the have a similar:

opacity: 0;

This turns the first element invisible, while turning the second element visible and smaller at the same time.

Upvotes: 0

repzero
repzero

Reputation: 8412

this link http://codepen.io/anon/pen/JGRGBd

the hover is working but you have not put anything changes to be made when css detects a mouse hover the tag

change

.a:hover{
}

to

.a:hover{
  background:green;
}

you will see the difference

EDIT for the basics of pseudo elements see here

http://www.w3schools.com/css/css_pseudo_elements.asp

Upvotes: 0

Related Questions