"img blog hover"
Bootstrap 3.0.0 Snippet by evarevirus

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h2>Box Transform Rotate 'Tourism In Egypt' </h2>
<div class="item tm1">
<img src="http://www.videoskick.com/wp-content/uploads/2016/06/Wallpaper-of-Egyptian-sphinx-and-pyramid-on-sunset.jpg">
<p>Sphinx</p>
</div>
<div class="item tm2">
<img src="https://9227-presscdn-0-11-pagely.netdna-ssl.com/wp-content/uploads/2015/11/Luxor-Egypt.jpg">
<p>Luxor, EGYPT </p>
</div>
<div class="item tm3">
<img src="https://www.roughguides.com/wp-content/uploads/2012/11/1416684531-660x420.jpg">
<p class="ar">قلعة صلاح الدين </p>
</div>
<div class="item tm4">
<img src="http://egyptfuntours.com/images/stories/egypt_tours_hurghada_safari.jpg">
<p> Safari Hurghada Desert </p>
</div>
<br>
<span>
<div class="item tm5">
<img src="http://outinafricaride.org/wp-content/uploads/2014/12/Pyramids1-720x380.jpg">
<p>Pyramids</p>
</div>
<div class="item tm6">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url('https://fonts.googleapis.com/css?family=Amiri|Aref+Ruqaa|Cairo|Changa|El+Messiri|Harmattan|Jomhuria|Lateef|Mirza|Rakkas|Lato|Source+Sans+Pro|Ubuntu');
/* *{transition: 0.3s linear; padding:0;margin:0;} */
body{
background-image: linear-gradient(-225deg, rgba(44, 216, 213, 0.45) 0%, #C5C1FF 56%, rgba(255, 186, 195, 0.71) 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}
h2 {margin:2em; letter-spacing:0.2em; color: #EEE}
.container{
margin: 3em auto;
width: 90%;
text-align: center;
/* font-family: 'Aref Ruqaa', serif; */
font-family: 'Ubuntu', sans-serif;
/* font-family: 'Lato', sans-serif; */
font-family: 'Source Sans Pro', sans-serif;
}
.item {
/* background: #FFF; */
margin: 2em;
display: inline-block;
width: 200px;
height: 200px;
border-radius: 20px;
transform: rotate(45deg);
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
padding:0;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
margin: 0 auto;
}
.item p {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: