Question: 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](http://codepen.io/anon/pen/JGRGBd) but it doesn't work correctly.

In this [website](http://html.webtemplatemasters.com/diplomat/), 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

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

```css
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;
}
```

```html
<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](http://codepen.io/rhulkashyap/pen/NxRNWO)
```
.a:hover
{
background-color:#f00;
transition: background-color 0.35s ease-out 0.1s;
}

```