"Various Hover css effect "
Bootstrap 4.1.1 Snippet by dhstorm

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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> <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="link"><p>B</p></div> <div class="link-2"><p>B</p></div> <img src="https://i.pinimg.com/736x/15/72/70/15727054150c6f2bb600dda06638c8f4--the-vote-photo-challenges.jpg" /></div> <div class="all"> <div class="link"><p>C</p></div> <div class="link-2"><p>C</p></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="strip"></div> <div class="strip-1"></div> <div class="strip-2"></div> <div class="strip-3"></div> <img src="https://i.pinimg.com/originals/1a/e6/31/1ae6314021c560caedc1694b9cee4ca3.jpg"></div> <div class="all"> <div class="strip"></div> <div class="strip-1"></div> <div class="strip-2"></div> <div class="strip-3"></div> <img src="https://img.medscapestatic.com/pi/meds/ckb/62/20162tn.jpg"></div> <div class="all"> <div class="strip"></div> <div class="strip-1"></div> <div class="strip-2"></div> <div class="strip-3"></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="round"><p>A</p></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="round"><p>B</p></div> <img src="https://i.pinimg.com/736x/15/72/70/15727054150c6f2bb600dda06638c8f4--the-vote-photo-challenges.jpg" /></div> <div class="all"> <div class="round"><p>C</p></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="move">A</div> <div class="move move-2">A</div> <img src="https://i.pinimg.com/originals/1a/e6/31/1ae6314021c560caedc1694b9cee4ca3.jpg"></div> <div class="all"> <div class="move">B</div> <div class="move move-2">B</div> <img src="https://img.medscapestatic.com/pi/meds/ckb/62/20162tn.jpg"></div> <div class="all"> <div class="move">C</div> <div class="move move-2">C</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="box">A</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">B</div> <img src="https://i.pinimg.com/736x/15/72/70/15727054150c6f2bb600dda06638c8f4--the-vote-photo-challenges.jpg" /></div> <div class="all"> <div class="box">G</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="slice"> <div class="s-1">A</div> <div class="s-1 s-2">B</div> </div> <div class="slice-y"> <div class="sy-1">C</div> <div class="sy-1 sy-2">D</div> </div> <div class="slice slice-x"> <div class="s-1">A</div> <div class="s-1 s-2">B</div> </div> <div class="slice-y slice-y2"> <div class="sy-1">C</div> <div class="sy-1 sy-2">D</div> </div> <img src="https://i.pinimg.com/originals/1a/e6/31/1ae6314021c560caedc1694b9cee4ca3.jpg"></div> <div class="all"> <div class="slice"> <div class="s-1">A</div> <div class="s-1 s-2">B</div> </div> <div class="slice-y"> <div class="sy-1">C</div> <div class="sy-1 sy-2">D</div> </div> <div class="slice slice-x"> <div class="s-1">A</div> <div class="s-1 s-2">B</div> </div> <div class="slice-y slice-y2"> <div class="sy-1">C</div> <div class="sy-1 sy-2">D</div> </div> <img src="https://img.medscapestatic.com/pi/meds/ckb/62/20162tn.jpg"></div> <div class="all"> <div class="slice"> <div class="s-1">A</div> <div class="s-1 s-2">B</div> </div> <div class="slice-y"> <div class="sy-1">C</div> <div class="sy-1 sy-2">D</div> </div> <div class="slice slice-x"> <div class="s-1">A</div> <div class="s-1 s-2">B</div> </div> <div class="slice-y slice-y2"> <div class="sy-1">C</div> <div class="sy-1 sy-2">D</div> </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="round1">VINTAGE</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="round1">VINTAGE</div> <img src="https://i.pinimg.com/736x/15/72/70/15727054150c6f2bb600dda06638c8f4--the-vote-photo-challenges.jpg" /></div> <div class="all"> <div class="round1">VINTAGE</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="fade"></div> <div class="fade3"></div> <div class="fade2">Alpha</div> <img src="https://i.pinimg.com/originals/1a/e6/31/1ae6314021c560caedc1694b9cee4ca3.jpg"></div> <div class="all"> <div class="fade"></div> <div class="fade3"></div> <div class="fade2">Beta</div> <img src="https://img.medscapestatic.com/pi/meds/ckb/62/20162tn.jpg"></div> <div class="all"> <div class="fade"></div> <div class="fade3"></div> <div class="fade2">Gamma</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="drop"> <img src="https://i.pinimg.com/originals/1a/e6/31/1ae6314021c560caedc1694b9cee4ca3.jpg"></div></div> <div class="all"> <div class="drop"> <img src="https://img.medscapestatic.com/pi/meds/ckb/62/20162tn.jpg"></div></div> <div class="all"> <div class="drop"> <img src="https://vignette.wikia.nocookie.net/shingekinokyojin/images/9/91/Skinhead_soldier_character_image.png/revision/latest?cb=20180204003210"></div></div> </div> </div> </div>
*{ 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{ left:0; } .search{ width:50px; height:50px; background-color:#fff; position:absolute; z-index:3; right:50%; margin-right:-25px; top:50%; margin-top:-25px; opacity:0; transition:all 0.5s; color:#000; text-align:center; line-height:50px; } .all:hover > .search{ opacity:1; transform:scale(2) rotate(360deg); } .link{ width:190px; height:380px; overflow:hidden; color:#666; position:absolute; z-index:4; transition:all 1.5s; top:-380px; background-color:rgba(204,204,204,0.5); } .link-2{ width:190px; height:380px; background-color:rgba(204,204,204,0.5); color:#666; position:absolute; z-index:4; left:50%; overflow:hidden; transition:all 1.5s; bottom:-380px; } .all:hover .link { top:0; } .all:hover .link-2 { bottom:0; } .all .link p,.all .link-2 p{ font-size:48px; font-family:Oswald; color:#FFF; line-height:380px; } .all .link p{ margin-left:93%; } .all .link-2 p{ margin-left:-7%; } .strip{ height:95px; width:380px; background-color:rgba(255,255,255,0.5); position:absolute; z-index:5; overflow:hidden; left:-380px; transition:all 1s; } .strip-1{ height:95px; width:380px; background-color:rgba(0,0,51,0.2); position:absolute; z-index:6; top:95px; overflow:hidden; right:-380px; transition:all 1s; } .strip-2{ height:95px; width:380px; background-color:rgba(255,255,255,0.5); position:absolute; z-index:7; top:190px; overflow:hidden; left:-380px; transition:all 1s; } .strip-3{ height:285px; width:380px; background-color:rgba(0,0,51,0.2); position:absolute; z-index:8; top:285px; overflow:hidden; right:-380px; transition:all 1s; } .all:hover > .strip{ left:0; } .all:hover > .strip-1{ right:0; } .all:hover > .strip-2{ left:0; } .all:hover > .strip-3{ right:0; } .round{ width:100px; height:100px; border-radius:50%; text-align:center; line-height:100px; position:absolute; z-index:9; font-size:48px; font-family:Oswald; color:#FFF; right:50%; margin-right:-50px; top:50%; opacity:0.1; margin-top:-50px; background-color:rgba(153,0,0,0.5); transition:all 1s; } .all:hover > .round{ transform:scale(1.5) rotate(-360deg); border-radius:20%; opacity:1; border:1px solid #fff; } .move{ width:50px; height:50px; background-color:#fff; position:absolute; z-index:10; top:50%; margin-top:-25px; left:-50px; opacity:0; transition:all 0.5s; text-align:center; line-height:50px; font-size:36px; color:#333; } .move-2{ transition:all 0.8s; } .all:hover > .move{ margin-left:40%; transform:rotate(360deg) ; opacity:1; } .all:hover > .move-2{ margin-left:73%; transform:rotate(360deg); opacity:1; } .box{ width:100px; height:100px; background-color:rgba(0,0,102,0.5); position:absolute; opacity:0; z-index:11; transition:all 1s; text-align:center; line-height:140px; color:#FFF; } .all:hover .box{ text-indent:40px; transform:scale(5); opacity:0.8; border-radius:0 0 30px 0; border:#FFF solid 1px; } .slice{ width:380px; height:95px; right:-380px; background-color:; position:absolute; z-index:12; transition:all 1s; opacity:0; } .s-1{ width:95px; height:95px; position:absolute; z-index:13; background-color:rgba(0,0,0,0.5); display:inline-block; text-align:center; line-height:95px; font-size:36px; color:#FFF; } .s-2{ position:absolute; right:95px; z-index:14; } .all:hover .slice{ right:0; opacity:1; } .slice-y{ width:95px; height:380px; top:-380px; background-color:; position:absolute; left:95px; z-index:15; opacity:0; transition:all 1s; } .sy-1{ width:95px; height:95px; position:absolute; top:95px; z-index:16; background-color:rgba(255,255,255,0.5); display:inline-block; text-align:center; line-height:95px; font-size:36px; color:#000; } .sy-2{ top:285px; } .all:hover .slice-y{ top:0; opacity:1; } .slice-x{ top:190px; } .slice-y2{ left:285px; } .round1{ width:380px; height:380px; position:absolute; z-index:17; background-color:rgba(0,0,0,1); border-radius:100%; top:-285px; transition:all 1s; opacity:0; text-align:center; line-height:190px; font-size:22px; } .all:hover .round1{ border-radius:0%; background-color:rgba(255,255,255,0.5); top:190px; opacity:1; text-align:center; line-height:190px; font-size:22px; } .fade{ width:380px; height:380px; background-color:rgba(255,255,255,1); position:absolute; font-size:36px; z-index:19; transition:all 0.5s; } .all:hover .fade{ transform:scale(0.8); background-color:rgba(255,255,255,0.1); } .fade2{ width:190px; height:300px; position:absolute; z-index:18; text-align:center; font-size:36px; line-height:150px; color:#000; top:25%; right:25%; opacity:0.2; background-color:rgba(255,255,255,1); transition:all 0.5s; } .all:hover .fade2{ top:0; opacity:1; background-color:rgba(255,255,255,0.5); } .fade3{ width:90px; height:380px; background-color:rgba(0,0,0,1); position:absolute; z-index:19; right:38%; transition:all 1s; } .all:hover .fade3{ border-radius:50px 50px 0 0; background-color:rgba(0,0,0,0.9); margin-top:260px; } .drop{ width:380px; height:380px; transition:all 0.5s; } .drop::after{ content:""; height:380px; width:380px; background-color:rgba(0,0,0,0.5); position:absolute; right:-100%; transform:rotate(45deg); top:100%; transition:all 0.5s; } .drop::before{ content:""; height:380px; width:380px; background-color:rgba(255,255,255,0.5); position:absolute; left:-100%; transform:rotate(45deg); bottom:100%; transition:all 0.5s; } .drop-text{ height:50px; width:380px; background-color:#000; } .all:hover .drop::before{ position:absolute; left:0; bottom:40%; transform:rotate(90deg); } .all:hover .drop::after{ position:absolute; right:0; top:40%; transform:rotate(90deg); }

Related: See More


Questions / Comments: