如何在圖片上添加懸停效果？

-3

這是我的HTML代碼？我們如何將懸停效果添加到圖像？如何在圖片上添加懸停效果？

<div class="top-destination"> 
    <div class="container-fluid"> 
    <h3>TOP DESTINATION</h3> 
    <div class="images"> 
     <div class="row"> 
     <div class="col-lg-3 col-md-6 col-sm-12 hidden-xs text"> 
      <img src="images/buddha.jpg" alt="buddha" class="small-image1"> 
      <h5>Buddha Point</h5> 
      <p>Buddha Dordenma<br></p> 
      <button>Read More</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

來源

2016-09-08 Deepa Monger

你能指定更多嗎？你的CSS在哪裏？ – highFlyingDodo

你的問題清楚地表明你沒有爲你的代碼做任何事情來根據你的需要運行。請記住，在** SO **之前，在詢問任何問題之前，您至少需要創建一個[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript -css-and-html-snippets）或[**創建一個最小化，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve）給某人提供任何幫助。 – vivekkupadhyay

你還沒有說過懸停效應應該是什麼，也沒有說你試圖做到這一點。投票結束。 –

-1

只需添加

.small-image1:hover { 
    //add properties 
}

來源

2016-09-08 10:50:47

我想製作佛陀多佛並閱讀更多內容，只有在鼠標指向圖像並且輪廓出現後才能出現。 –

-1

使用OnMouseEnter在和OnMouseLeave在執行Java功能至極處理效果

來源

2016-09-08 10:52:15 Dropye

-1

檢查這個環節，他們已經工作示例圖像懸停事件。

https://codepen.io/nxworld/pen/ZYNOBZ

HTML

<h1>CSS Image Hover Effects</h1> 
    <p>← <a href="http://www.nxworld.net/tips/css-image-hover-effects.html" target="_blank">View the article</a></p> 

    <h2>No Effect</h2> 
    <div class="column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo01">1. Zoom In #1</h2> 
    <div class="hover01 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo02">2. Zoom In #2</h2> 
    <div class="hover02 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo03">3. Zoom Out #1</h2> 
    <div class="hover03 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo04">4. Zoom Out #2</h2> 
    <div class="hover04 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo05">5. Slide</h2> 
    <div class="hover05 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2> 
    <div class="hover06 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo07">7. Blur</h2> 
    <div class="hover07 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo08">8. Gray Scale</h2> 
    <div class="hover08 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo09">9. Sepia</h2> 
    <div class="hover09 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo10">10. Blur + Gray Scale</h2> 
    <div class="hover10 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo11">11. Opacity #1</h2> 
    <div class="hover11 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo12">12. Opacity #2</h2> 
    <div class="hover12 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure style="background-color:#9b59b6;"><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure style="background-color:#3498db;"><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo13">13. Flashing</h2> 
    <div class="hover13 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo14">14. Shine</h2> 
    <div class="hover14 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div> 

    <h2 id="demo15">15. Circle</h2> 
    <div class="hover15 column"> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
     <div> 
      <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure> 
      <span>Hover</span> 
     </div> 
    </div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); 
body { 
    color: #333; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 300; 
} 
h1, 
h1+p { 
    margin: 30px 15px 0; 
    font-weight: 300; 
} 
h1+p a { 
    color: #333; 
} 
h1+p a:hover { 
    text-decoration: none; 
} 
h2 { 
    margin: 60px 15px 0; 
    padding: 0; 
    font-weight: 300; 
} 
h2 span { 
    margin-left: 1em; 
    color: #aaa; 
    font-size: 85%; 
} 
.column { 
    margin: 15px 15px 0; 
    padding: 0; 
} 
.column:last-child { 
    padding-bottom: 60px; 
} 
.column::after { 
    content: ''; 
    clear: both; 
    display: block; 
} 
.column div { 
    position: relative; 
    float: left; 
    width: 300px; 
    height: 200px; 
    margin: 0 0 0 25px; 
    padding: 0; 
} 
.column div:first-child { 
    margin-left: 0; 
} 
.column div span { 
    position: absolute; 
    bottom: -20px; 
    left: 0; 
    z-index: -1; 
    display: block; 
    width: 300px; 
    margin: 0; 
    padding: 0; 
    color: #444; 
    font-size: 18px; 
    text-decoration: none; 
    text-align: center; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
    opacity: 0; 
} 
figure { 
    width: 300px; 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    background: #fff; 
    overflow: hidden; 
} 
figure:hover+span { 
    bottom: -36px; 
    opacity: 1; 
} 



/* Zoom In #1 */ 
.hover01 figure img { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover01 figure:hover img { 
    -webkit-transform: scale(1.3); 
    transform: scale(1.3); 
} 

/* Zoom In #2 */ 
.hover02 figure img { 
    width: 300px; 
    height: auto; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover02 figure:hover img { 
    width: 350px; 
} 

/* Zoom Out #1 */ 
.hover03 figure img { 
    -webkit-transform: scale(1.5); 
    transform: scale(1.5); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover03 figure:hover img { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
} 

/* Zoom Out #2 */ 
.hover04 figure img { 
    width: 400px; 
    height: auto; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover04 figure:hover img { 
    width: 300px; 
} 

/* Slide */ 
.hover05 figure img { 
    margin-left: 30px; 
    -webkit-transform: scale(1.5); 
    transform: scale(1.5); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover05 figure:hover img { 
    margin-left: 0; 
} 

/* Rotate */ 
.hover06 figure img { 
    -webkit-transform: rotate(15deg) scale(1.4); 
    transform: rotate(15deg) scale(1.4); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover06 figure:hover img { 
    -webkit-transform: rotate(0) scale(1); 
    transform: rotate(0) scale(1); 
} 

/* Blur */ 
.hover07 figure img { 
    -webkit-filter: blur(3px); 
    filter: blur(3px); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover07 figure:hover img { 
    -webkit-filter: blur(0); 
    filter: blur(0); 
} 

/* Gray Scale */ 
.hover08 figure img { 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover08 figure:hover img { 
    -webkit-filter: grayscale(0); 
    filter: grayscale(0); 
} 

/* Sepia */ 
.hover09 figure img { 
    -webkit-filter: sepia(100%); 
    filter: sepia(100%); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover09 figure:hover img { 
    -webkit-filter: sepia(0); 
    filter: sepia(0); 
} 

/* Blur + Gray Scale */ 
.hover10 figure img { 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover10 figure:hover img { 
    -webkit-filter: grayscale(100%) blur(3px); 
    filter: grayscale(100%) blur(3px); 
} 

/* Opacity #1 */ 
.hover11 figure img { 
    opacity: 1; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover11 figure:hover img { 
    opacity: .5; 
} 

/* Opacity #2 */ 
.hover12 figure { 
    background: #1abc9c; 
} 
.hover12 figure img { 
    opacity: 1; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 
.hover12 figure:hover img { 
    opacity: .5; 
} 

/* Flashing */ 
.hover13 figure:hover img { 
    opacity: 1; 
    -webkit-animation: flash 1.5s; 
    animation: flash 1.5s; 
} 
@-webkit-keyframes flash { 
    0% { 
     opacity: .4; 
    } 
    100% { 
     opacity: 1; 
    } 
} 
@keyframes flash { 
    0% { 
     opacity: .4; 
    } 
    100% { 
     opacity: 1; 
    } 
} 

/* Shine */ 
.hover14 figure { 
    position: relative; 
} 
.hover14 figure::before { 
    position: absolute; 
    top: 0; 
    left: -75%; 
    z-index: 2; 
    display: block; 
    content: ''; 
    width: 50%; 
    height: 100%; 
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); 
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); 
    -webkit-transform: skewX(-25deg); 
    transform: skewX(-25deg); 
} 
.hover14 figure:hover::before { 
    -webkit-animation: shine .75s; 
    animation: shine .75s; 
} 
@-webkit-keyframes shine { 
    100% { 
     left: 125%; 
    } 
} 
@keyframes shine { 
    100% { 
     left: 125%; 
    } 
} 

/* Circle */ 
.hover15 figure { 
    position: relative; 
} 
.hover15 figure::before { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    z-index: 2; 
    display: block; 
    content: ''; 
    width: 0; 
    height: 0; 
    background: rgba(255,255,255,.2); 
    border-radius: 100%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    opacity: 0; 
} 
.hover15 figure:hover::before { 
    -webkit-animation: circle .75s; 
    animation: circle .75s; 
} 
@-webkit-keyframes circle { 
    0% { 
     opacity: 1; 
    } 
    40% { 
     opacity: 1; 
    } 
    100% { 
     width: 200%; 
     height: 200%; 
     opacity: 0; 
    } 
} 
@keyframes circle { 
    0% { 
     opacity: 1; 
    } 
    40% { 
     opacity: 1; 
    } 
    100% { 
     width: 200%; 
     height: 200%; 
     opacity: 0; 
    } 
}

來源

2016-09-08 10:54:08

增加了一個codepen.io鏈接。工作實例解釋更多。 –

-1

。小-image1的：懸停{ 不透明度：0.5; }

來源

2016-09-08 10:55:21 Nayan

如何在圖片上添加懸停效果？

回答

相關問題