how to show bottom to top image with transition when hover..!
(悬停时如何显示从下到上的图像以及过渡。)
im using bootstrap plugin, i want to show image when i hover this element and the image wants to show bottom to top slide with transition..
(我正在使用bootstrap插件，当我将鼠标悬停在此元素上时，我想显示图像，并且该图像想显示过渡到底部到顶部的幻灯片。)
can you solute my assestment
(你能解决我的要求吗)
Here is my fiddle..
(这是我的小提琴)
Fiddle
(小提琴)
Here is my code..
(这是我的代码。)
ul li .fa { font-family: 'Odibee Sans', cursive; } body { margin: 0; padding: 0; background-color: #ccc; } ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0; display: flex; } ul li { list-style: none; margin: 0 40px; } ul li .fa { font-size: 40px; color: #262626; line-height: 80px; transition: .5s; } ul li a { position: relative; display: block; width: 80px; height: 80px; background-color: #fff; text-align: center; transform: perspective(100px) rotate(-30deg) skew(25deg) translate(0, 0); transition: .5s; box-shadow: -20px 20px 10px rgb(0, 0, 0, 0.5); } ul li a::before { content: ""; position: absolute; top: 10px; left: -20px; height: 100%; width: 20px; background: #b1b1b1; transition: .5s; transform: rotate(0deg) skewY(-45deg); } ul li a::after { content: ""; position: absolute; top: 80px; left: -11px; height: 20px; width: 100%; background: #b1b1b1; transition: .5s; transform: rotate(0deg) skewX(-45deg); } ul li a:hover { transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px); box-shadow: -50px 50px 50px rgb(0, 0, 0, 0.5); } ul li:hover .fa { color: #fff; } ul li a:hover { transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px); box-shadow: -50px 50px 50px rgb(0, 0, 0, 0.5); } ul li:hover:nth-child(1) a { background: #55acee; } ul li:hover:nth-child(1) a:before { background: #4184b7; } ul li:hover:nth-child(1) a:after { background: #4d9fde; } a.snapchat img { position: absolute; opacity: 0; width: 100px; height: 100px; left: 0; top: -20px; transition: opacity .5s, top .5s; } a.snapchat:hover img { opacity: 1; top: 20px; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>PLumz</title> <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> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> <link href="https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap" rel="stylesheet"> </head> <body> <ul> <li><a class="snapchat" href="#"><i class="fa" aria-hidden="true">S<img src="http://i.utdstc.com/icons/256/snapchat-android.png" /></i></a> </li> </ul> </body> </html>
Im using only Html and css..
(我只使用HTML和CSS。)
css only
(仅CSS)
ask by Joe translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
