如何為我的圖片庫創建此 hover 效果？
[英]How can I create this hover effect for my image gallery?
問題描述
基本上，我創建了一個類似於以下代碼的圖片庫。 但是，我無法創建與圖像一起使用的 hover 效果。 如果可能的話，我希望 hover 效果看起來像這樣： https://codepen.io/jguerra/pen/rNBdYeJ 。 誰能幫我創建這個？ 任何幫助表示贊賞。 謝謝。
.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
我可能會 position 容器內的圖像並在 css 中使用以下類型的代碼。 希望它以某種方式有所幫助。
.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
嘗試使用 after 和 before 偽元素來制作白色邊框線並為圖像提供藍色（或您想要的顏色）背景。 您可以使所有它們不可見並且不透明度為 0。 當在 hover 上時，您可以讓它們再次可見。 檢查下面這個 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);
}
你可以用文本不透明度做同樣的事情。
如何為該jQuery Image Swap Gallery添加淡入淡出效果
[英]How can I add fade effect to this jQuery Image Swap Gallery
如何制作可以在其中懸停或顯示視頻或圖像縮略圖並顯示較大圖像的畫廊？
[英]How do I make a gallery where I can hover or a video OR image thumbnail and have a larger image appear?
在 JavaScript 中，如何在模態庫中的每個圖像上添加動畫效果？
[英]In JavaScript, how can I add animation effect on every image in a modal gallery?
如何實現 JS，以便當我 hover 畫廊中的圖像時，它會影響除懸停圖像之外的所有其他圖像？
[英]How can I implement JS so that when I hover an image in a gallery it affects every other image except the hovered image?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.