Bootstrap Snippet Various Hover css 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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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">
    <div class="row">
    <div class="main">
<div class="all">
<div class="box-one">IMAGE VIEW</div>
<img src="https://www.artscatalyst.org/sites/default/files/styles/project_image/public/images/18-May/CRISP_MATERIAL_SIGHT_NGCA_6.JPG?itok=4t1Nv4yx" /></div>
<div class="all">
<div class="box-one">IMAGE VIEW</div>
<img src="https://i.pinimg.com/736x/15/72/70/15727054150c6f2bb600dda06638c8f4--the-vote-photo-challenges.jpg" /></div>
<div class="all">
<div class="box-one">IMAGE VIEW</div>
<img src="http://stock-image.mediafocus.com/images/previews/early-morning-daisy-meadow-natural-backgrounds-dt1218660.jpg" /></div>
</div>
<div class="main">
<div class="all">
<div class="search">A</div>
<img src="https://i.pinimg.com/originals/1a/e6/31/1ae6314021c560caedc1694b9cee4ca3.jpg" /></div>
<div class="all">
<div class="search">A</div>
<img src="https://img.medscapestatic.com/pi/meds/ckb/62/20162tn.jpg" /></div>
<div class="all">
<div class="search">A</div>
<img src="https://vignette.wikia.nocookie.net/shingekinokyojin/images/9/91/Skinhead_soldier_character_image.png/revision/latest?cb=20180204003210" /></div>
</div>
<div class="main">
<div class="all">
<div class="link"><p>A</p></div>
<div class="link-2"><p>A</p></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
*{
    margin:0;
    padding:0;
}
body{
    font-family:Oswald;
}
.main{
    width:1200px;
    height:380px;
    margin:0 auto;
}
.all{
    width:380px;
    height:380px;
    position:relative;
    background-color:rgba(255,255,255,0.5);
    z-index:1;
    margin-right:10px;
    overflow:hidden;
    float:left;
    margin-bottom:10px;
}
.box-one{
    width:380px;
    height:40px;
    background-color:rgba(255,255,255,0.5);
    position:absolute;
    z-index:2;
    bottom:0;
    left:380px;
    transition:all 1s;
    text-align:center;
    line-height:40px;
    color:#ffffff;
}   
.all:hover > .box-one{  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Various Hover css effect "
Bootstrap 4.1.1 Snippet by karimsharf12252

Related: See More

Questions / Comments:

"Various Hover css effect " Bootstrap 4.1.1 Snippet by karimsharf12252

Related: See More

Questions / Comments:

"Various Hover css effect "
Bootstrap 4.1.1 Snippet by karimsharf12252