css3實(shí)現(xiàn)圖片遮罩效果鼠標(biāo)hover以后出現(xiàn)文字
發(fā)布時(shí)間：2013-11-05 16:30:47 作者：佚名 
我要評(píng)論
我要評(píng)論鼠標(biāo)hover 以后，圖片上面出現(xiàn)一個(gè)遮罩透明度變化，顯示設(shè)置好的文字，完全使用css 實(shí)現(xiàn)，效果如下，喜歡的朋友可以參考下
鼠標(biāo)hover 以后。圖片上面出現(xiàn)一個(gè)遮罩, 透明度變化， 顯示設(shè)置好的文字的文字，完全使用css 實(shí)現(xiàn)，下圖是效果
關(guān)鍵代碼
.featured-image:hover {
opacity: 0.9;
color: #fff;
background: rgba(0,0,0,0.8);
}
看源碼吧
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
#content article {
float: left;
margin-right: 4%;
max-width: 236px;
position: relative;
width: 22%;
margin-bottom: 3.5%;
}
#content article:nth-child(4n+4) {
margin-right: 0;
}
.post-format-content {
position: relative;
background: #111;
}
.post-thumbnail {
max-width: 100%;
height: auto;
overflow: hidden;
}
.content-wrap {
padding: 0;
position: absolute;
text-align: center;
width: 100%;
top: 0;
bottom: 0;
display: table-cell;
vertical-align: middle;
overflow: hidden;
}
.content-wrap h1.entry-title {
display: table;
font-size: 110%;
height: 100%;
text-transform: uppercase;
width: 100%;
margin:0;
}
.edit-link {
z-index: 2;
}
.featured-image {
display: table-cell;
position: relative;
transition: opacity .25s ease-in-out, background .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out, background .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out, background .25s ease-in-out;
vertical-align: middle;
z-index: 1;
color: #fff;
text-decoration: none;
opacity: 0;
padding: 10%;
}
.featured-image:hover {
opacity: 0.9;
color: #fff;
background: rgba(0,0,0,0.8);
}
.post-thumbnail img {
display: block;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="content">
<article class="post-152 post type-post status-publish format-standard hentry category-people category-photos">
<div class="post-format-content">
<div class="post-thumbnail"> <img width="480" height="640" src="assets/img/1.jpg" class="attachment-thumbnail wp-post-image" alt="105694702"> </div>
<div class="content-wrap">
<h1 class="entry-title"><a href="" class="featured-image" rel="bookmark">Music & Fashion</a></h1>
</div>
</div>
</article>
<article class="post-152 post type-post status-publish format-standard hentry category-people category-photos">
<div class="post-format-content">
<div class="post-thumbnail"> <img width="480" height="640" src="assets/img/2.jpg" class="attachment-thumbnail wp-post-image" alt="105694702"> </div>
<div class="content-wrap">
<h1 class="entry-title"><a href="" class="featured-image" title="amp; Fashion" rel="bookmark">Music & Fashion</a></h1>
</div>
</div>
</article>
</div>
</body>
</html>
關(guān)鍵代碼
復(fù)制代碼
代碼如下:.featured-image:hover {
opacity: 0.9;
color: #fff;
background: rgba(0,0,0,0.8);
}
看源碼吧
復(fù)制代碼
代碼如下:<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
#content article {
float: left;
margin-right: 4%;
max-width: 236px;
position: relative;
width: 22%;
margin-bottom: 3.5%;
}
#content article:nth-child(4n+4) {
margin-right: 0;
}
.post-format-content {
position: relative;
background: #111;
}
.post-thumbnail {
max-width: 100%;
height: auto;
overflow: hidden;
}
.content-wrap {
padding: 0;
position: absolute;
text-align: center;
width: 100%;
top: 0;
bottom: 0;
display: table-cell;
vertical-align: middle;
overflow: hidden;
}
.content-wrap h1.entry-title {
display: table;
font-size: 110%;
height: 100%;
text-transform: uppercase;
width: 100%;
margin:0;
}
.edit-link {
z-index: 2;
}
.featured-image {
display: table-cell;
position: relative;
transition: opacity .25s ease-in-out, background .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out, background .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out, background .25s ease-in-out;
vertical-align: middle;
z-index: 1;
color: #fff;
text-decoration: none;
opacity: 0;
padding: 10%;
}
.featured-image:hover {
opacity: 0.9;
color: #fff;
background: rgba(0,0,0,0.8);
}
.post-thumbnail img {
display: block;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="content">
<article class="post-152 post type-post status-publish format-standard hentry category-people category-photos">
<div class="post-format-content">
<div class="post-thumbnail"> <img width="480" height="640" src="assets/img/1.jpg" class="attachment-thumbnail wp-post-image" alt="105694702"> </div>
<div class="content-wrap">
<h1 class="entry-title"><a href="" class="featured-image" rel="bookmark">Music & Fashion</a></h1>
</div>
</div>
</article>
<article class="post-152 post type-post status-publish format-standard hentry category-people category-photos">
<div class="post-format-content">
<div class="post-thumbnail"> <img width="480" height="640" src="assets/img/2.jpg" class="attachment-thumbnail wp-post-image" alt="105694702"> </div>
<div class="content-wrap">
<h1 class="entry-title"><a href="" class="featured-image" title="amp; Fashion" rel="bookmark">Music & Fashion</a></h1>
</div>
</div>
</article>
</div>
</body>
</html>
相關(guān)文章
CSS3實(shí)現(xiàn)偽類(lèi)hover離開(kāi)時(shí)平滑過(guò)渡效果示例
本篇文章主要介紹了CSS3實(shí)現(xiàn)偽類(lèi)hover離開(kāi)時(shí)平滑過(guò)渡效果示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-10
CSS3鼠標(biāo)hover圖片遮罩層文字動(dòng)畫(huà)特效
這是一款使用CSS3制作鼠標(biāo)hover圖片遮罩層動(dòng)畫(huà)特效，在鼠標(biāo)hover圖片時(shí)，會(huì)生成一個(gè)不同顏色的遮罩層，并顯示文字2017-06-27
5種純CSS3鼠標(biāo)hover按鈕動(dòng)畫(huà)特效源碼
這是一套鼠標(biāo)hover按鈕動(dòng)畫(huà)特效代碼。5種效果，在結(jié)構(gòu)布局上使用flex來(lái)進(jìn)行布局，并通過(guò)css transition來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果，歡迎下載2017-04-10CSS3制作hover下劃線(xiàn)動(dòng)畫(huà)
本文主要介紹了CSS3制作hover下劃線(xiàn)動(dòng)畫(huà)的方法步驟。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-27
16種基于css3 Bootstrap圖片hover懸停遮罩效果
bootstrap-image-hover是一款基于Bootstrap的css3圖片hover效果。共16種特效遮罩，歡迎下載2017-03-13
jQuery+CSS3實(shí)現(xiàn)的遮罩圖片hover翻轉(zhuǎn)效果源碼
是一款基于jQuery+css3實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)遮罩圖片會(huì)出現(xiàn)翻轉(zhuǎn)特效的代碼，效果非常大方時(shí)尚，本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用，有興趣的朋友們可以前來(lái)下載使用2015-05-21
CSS3實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)按鈕后圖標(biāo)翻轉(zhuǎn)特效源碼
CSS3創(chuàng)意按鈕鼠標(biāo)經(jīng)過(guò)翻轉(zhuǎn)特效是一款分為4種顏色和3種尺寸大小，并且在鼠標(biāo)滑過(guò)按鈕時(shí)帶有炫酷的翻轉(zhuǎn)效果，本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用，有需要的朋友們可以前來(lái)下載使用2016-11-14
純CSS3 3D魔方翻轉(zhuǎn)動(dòng)畫(huà)特效源碼
純CSS3 3D魔方翻轉(zhuǎn)動(dòng)畫(huà)特效源碼是一款使用簡(jiǎn)單純CSS3代碼實(shí)現(xiàn)的魔方特效下載，效果非常棒，本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用，有需要的朋友可以直接下載使用2016-08-10
純css3實(shí)現(xiàn)的鼠標(biāo)滑過(guò)圖片左右3d翻轉(zhuǎn)效果源碼
這是一款基于純css3實(shí)現(xiàn)的鼠標(biāo)滑過(guò)圖片左右3d翻轉(zhuǎn)效果源碼。鼠標(biāo)滑過(guò)圖片可見(jiàn)圖片呈現(xiàn)出翻轉(zhuǎn)的效果，該3d翻轉(zhuǎn)效果由純css3實(shí)現(xiàn)，不含任何js元素2016-07-25
純css3實(shí)現(xiàn)的3D方塊翻轉(zhuǎn)動(dòng)畫(huà)特效源碼
這是一款純css3實(shí)現(xiàn)的3D方塊翻轉(zhuǎn)動(dòng)畫(huà)特效源碼。畫(huà)面中心的立方體方塊自身做翻轉(zhuǎn)運(yùn)動(dòng)，方塊外圍的圓環(huán)也隨著方塊的轉(zhuǎn)動(dòng)做旋轉(zhuǎn)運(yùn)動(dòng)，整體效果流暢自然。該特效動(dòng)畫(huà)采用純css32016-07-22
