如何为我的图片库创建此 hover 效果？
[英]How can I create this hover effect for my image gallery?
问题描述
Basically, I have created an image gallery that looks like the code below.
基本上，我创建了一个类似于以下代码的图片库。 However, I am having trouble creating a hover effect that goes with the images.但是，我无法创建与图像一起使用的 hover 效果。 I would like the hover effect to look something like this if possible: https://codepen.io/jguerra/pen/rNBdYeJ .如果可能的话，我希望 hover 效果看起来像这样： https://codepen.io/jguerra/pen/rNBdYeJ 。 Could anyone help me with creating this?谁能帮我创建这个？ Any help is appreciated.任何帮助表示赞赏。 Thanks.谢谢。
.cf:before, .cf:after { content: " "; display: table; }.cf:after { clear: both; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*block level elements*/.page { margin: 0px; padding: 0px; }.themains { margin: 0px; padding: 0px; max-width: none; }.inner { max-width: 1000px; margin: auto; padding-left: 15px; padding-right: 15px; }.scroll-container { position: relative; overflow-x: auto; overflow-y: hidden; white-space: nowrap; width: 100%; height: 400px; scroll-snap-type: mandatory; scroll-behavior: smooth; background: #2C3E50; border: solid 7px yellow; font-size: 0px; margin-bottom: 50px; }.scroll-container.scroll-section { display: inline-block; vertical-align: middle; background: transparent; border: solid 5px #BFC9CA; white-space: nowrap; } /*Slider X (different sized images)*/.scroll-container.diff-size { scroll-snap-destination: 50% 0%; padding: 20px 0px; }.scroll-container.diff-size.scroll-section { width: auto; height: 100%; margin-right: 15px; scroll-snap-coordinate: 50% 0%; }.scroll-container.diff-size.scroll-section:first-child { scroll-snap-coordinate: 0% 0%, 50% 0%; margin-left: 15px; }.scroll-container.diff-size.scroll-section:last-child { scroll-snap-coordinate: 50% 0%, 100% 0%; }
<,DOCTYPE html> <html lang='en'> <head> <title>Gallery</title> <meta charset="UTF-8"> <title>Horizontal Scroll Gallery</title> <meta content="width=device-width: initial-scale=1" name="viewport"> <link href="https.//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"> <link href="style:css" rel="stylesheet"> </head> <body> <article class="page"> <article class="themains"> <div class="scroll-intro" id="intro"></div> <div class="inner"> <div class="scroll-container diff-size"><img class="scroll-section" src="https.//cdn.pixabay.com/photo/2017/06/23/17/41/morocco-2435391__340:jpg"> <img class="scroll-section" src="https.//cdn.pixabay.com/photo/2016/03/09/09/42/buildings-1245953__340:jpg"> <img class="scroll-section" src="https.//cdn.pixabay.com/photo/2013/03/02/02/41/city-89197__340:jpg"> <img class="scroll-section" src="https.//cdn.pixabay.com/photo/2020/03/27/08/57/waterfall-4972945_1280:jpg"> <img class="scroll-section" src="https.//cdn.pixabay.com/photo/2012/11/28/10/37/rocket-launch-67649_1280:jpg"> <img class="scroll-section" src="https.//cdn.pixabay.com/photo/2015/08/07/15/47/fireworks-879461_1280:jpg"> <img class="scroll-section" src="https.//cdn.pixabay.com/photo/2012/03/03/23/06/backdrop-21534_1280:jpg"> <img class="scroll-section" src="https.//cdn.pixabay.com/photo/2020/02/27/14/33/building-4884852__340:jpg"> <img class="scroll-section" src="https.//cdn.pixabay.com/photo/2020/05/13/11/38/cherry-blossoms-5167156_1280:jpg"></div> </div> <p><br> <br></p> </article> </article><.-- partial --> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'> </script> </body> </html>
2 个解决方案
解决方案1
0 2021-06-03 15:52:10
I would probably position the images inside a container and use the following kind of code in css.我可能会 position 容器内的图像并在 css 中使用以下类型的代码。 Hopefully it helps somehow.希望它以某种方式有所帮助。
.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #008CBA; }.container:hover.overlay { opacity: 1;
解决方案2
0 2021-06-03 16:06:44
Try using after and before pseudo-elements to make that white border-lines and give blue(or what color you want) background to image.尝试使用 after 和 before 伪元素来制作白色边框线并为图像提供蓝色（或您想要的颜色）背景。 You can make all them invisible and 0 opacity.您可以使所有它们不可见并且不透明度为 0。 And when on hover you can make them visible again.当在 hover 上时，您可以让它们再次可见。 Check this css below.检查下面这个 css。
figcaption {
color: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
padding: 4rem;
text-align: center;
}
figcaption::before,
figcaption::after {
content: '';
position: absolute;
top: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
left: 1.5rem;
transition: 0.5s;
}
figcaption::before {
border-top: 1px solid white;
border-bottom: 1px solid white;
transform: scale(0,1);
}
figcaption::after {
border-right: 1px solid white;
border-left: 1px solid white;
transform: scale(1,0);
}
figcaption:hover::before,figcaption:hover::after{
transform: scale(1);
}
and you can make the same thing with text opacity.你可以用文本不透明度做同样的事情。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.