Bootstrap Snippet Rows with image hover effect using HTML CSS

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="content bg-blue">
    <h1 class="tab center bounds padding active"><span>Products</span></h1>
    <div class="bounds padding">
        
                <a href="/Main/Page/Products" class="item zoom active">
                    <div class="column">
                        <div class="image">                         
                            <img id="ctl00_body_rptProducts_ctl00_imgProduct" class="cover accelerate" src="https://bufiles.blob.core.windows.net/co3657/products/bvh_products1.jpg" alt="antimicrobial alphasan additive prevents odors" />
                            <div class="link-abs">
                                <p class="link-col-text">View More...</p>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="text">
                            <h2>HENKEL POLYBIT CONSTRUCTION CHEMICALS</h2>
                            <p><span class="text-smaller">Waterproofing. Industrial Flooring. Structural Repair. Sealants and Adhesleves.</span></p>            
                        </div>
                    </div>
                </a>
            
                <a href="/dispersitech-pigment-dispersion/" class="item zoom active">
                    <div class="column">
                        <div class="image">
                            
                            <img id="ctl00_body_rptProducts_ctl01_imgProduct" class="cover accelerate" src="https://bufiles.blob.core.windows.net/co3657/products/bvh_products2.jpg" alt="Dispersitech Pigment Dispersion" />
                            <div class="link-abs">
                                <p class="link-col-text">View More...</p>
                            </div>
                        </div>
                    </div>
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
.link-abs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: transparent;
    transition: all 0.5s ease;
opacity: 0;
}
.link-abs:hover {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.45);
opacity: 1;
}
.link-col-text {
    color: #fff;
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Segoe UI';
    font-weight: 100;
    display: inline-block;
    padding-top: 5px;
}
ol,
ul {
    list-style: none
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Rows with image hover effect"
Bootstrap 3.3.0 Snippet by Harut

Related: See More

Questions / Comments:

"Rows with image hover effect" Bootstrap 3.3.0 Snippet by Harut

Related: See More

Questions / Comments:

"Rows with image hover effect"
Bootstrap 3.3.0 Snippet by Harut