Bootstrap Snippet Magic hover using HTML CSS Bootstrap

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">
    <h1 class="text-center">Some boxes with nice hover :)</h1>
    <div class='row'>
        <!--Boxes-->
        
        <div class="col-xs-12 col-sm-6 col-md-3">
            <a class="list-quotes" href="/">
                <!-- Recommended size 360X360 -->
                <img class='img-responsive' alt="img" src="http://images.shape.mdpcdn.com/sites/shape.com/files/styles/story_detail/public/story/dating-a-younger-man-700_0.jpg?itok=VdKivCyT">
                <div class="quotes">
                    <h1>Lorem ipsum dolor</h1>
                    <span class="year">Date</span>
                    <span class="cat-name">Name</span>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span>...Read More</span>
                    </p>
                </div>
            </a>
        </div>
        
        <div class="col-xs-12 col-sm-6 col-md-3">
            <a class="list-quotes" href="/">
                <!-- Recommended size 360X360 -->
                <img class='img-responsive' alt="img" src="http://www.jimwegryn.com/Names/Cowboys/lane.jpg">
                <div class="quotes">
                    <h1>Lorem ipsum dolor</h1>
                    <span class="year">Date</span>
                    <span class="cat-name">Name</span>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span>...Read More</span>
                    </p>
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
/*Thats fot the body forget about it*/
body{
    background: #f5f5f5;
}
/*Thats fot the body forget about it*/
/*Main style*/
.list-quotes {
    background: #339999;
    cursor: pointer;
    height: auto;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    display: block;
    border: 1px solid #339999;
}
.list-quotes img,
.list-quotes h1 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}
.list-quotes img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.list-quotes h1{
    background: rgba(51,153,153,0.8);
    bottom: 50px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    left: 0;
    padding: 15px;
    position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Magic hover"
Bootstrap 3.0.0 Snippet by Hasan Zahran

Related: See More

Questions / Comments:

"Magic hover" Bootstrap 3.0.0 Snippet by Hasan Zahran

Related: See More

Questions / Comments:

"Magic hover"
Bootstrap 3.0.0 Snippet by Hasan Zahran