hover-box/style.less at master · rcesar/hover-box · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);

h1{
	font-size: 50px;
	text-align: center;
	font-family: 'Open Sans';
	border-bottom: 10px solid #f1c40f ;
	text-transform: uppercase;
	color:#333;
}

.row{
	width: 1080px;
	margin: 0 auto;

	&:after {
		content: ".";
		display: block;
		height: 0;
		width: 0;
		margin: 0;
		visibility: hidden;
		clear: both;
	}

}

.img-box{
	width: 340px;
	height: 340px;
	margin: 10px;
	float: left;
	position: relative;


	&:hover {
		.box{
			opacity: 1;
			border-bottom: 15px solid #e74c3c;
			}
}

	img{
	width: 340px;
	height: 340px;


	}


}

.box{
	width: 100%;
	position: absolute;
	box-sizing:border-box;
	opacity: 0.0;
	font-family: 'Open Sans';
	padding: 50px 10px;
	text-align: center;
	color: #fff;
	height: 100%;
	background: #333;
	-webkit-transition: 1s all ease;
	-moz-transition: 1s all ease;
	-ms-transition: 1s all ease;
	-o-transition: 1s all ease;
	transition: 1s all ease;

	h3{
		text-transform: uppercase;
		font-size: 20px
	}

	p{
		font-size: 13px;
		text-transform: uppercase;
	}

	.btn{
		border: none;
		padding: 5px 15px;
		font-size: 20px;
	cursor:pointer;

		text-transform: uppercase;
		background: #f1c40f;
		color: #333;
		-webkit-transition: 0.5s all ease;
		-moz-transition: 0.5s all ease;
		-ms-transition: 0.5s all ease;
		-o-transition: 0.5s all ease;
		transition: 0.5s all ease;


		&:hover {
			background:#e67e22;
			color:#fff;
			-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		}

	}
}