鼠标悬停的图像:透明框与图像大小不同
Images with Mouseover Hover: Transparent Boxes Not Same Size as Image
我有一些代码在我的图像上添加了透明框的悬停效果,并带有文本叠加层,但是透明框没有对齐图像的大小。透明框似乎要么太小(使下图的顶部和底部不透明)要么太大(导致我的页面完全不对齐)。这可能是盒子大小的问题?我想我已将其设置为自动变为图像大小的 100%,但我可能遗漏了一些东西。
Link 到我的站点:http://jchambliss.aisites.com/imd311/portfolio/sites.html
此处包含必要的代码:
#preview {
max-width: 100%;
border-collapse: collapse;
}
#text {
position: absolute;
opacity: 0;
max-width: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Web Design Projects */
.sitesAds {
position: relative;
border-collapse: collapse;
}
.sitesAds:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.sitesTokyo {
position: relative;
border-collapse: collapse;
}
.sitesTokyo:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.sitesMobile {
position: relative;
border-collapse: collapse;
}
.sitesMobile:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.sitesRoux {
position: relative;
border-collapse: collapse;
}
.sitesRoux:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
<!DOCTYPE html>
<html>
<head>
<link href="portfolio.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Amita|Encode+Sans+Expanded|Leckerli+One|Merienda+One|Source+Sans+Pro" rel="stylesheet">
</head>
<body>
<div>
<table>
<tr>
<td><a href="ads.html"><div class="sitesAds"><img src="images/ads.jpg" id="preview" alt="Banner Ads"/>
<h3 id="text">Banner Ads</h3></div></a>
</td>
<td><a href="tokyo.html"><div class="sitesTokyo"><img src="images/tokyo.jpg" id="preview" alt="One Page Ad Site: Tokyo, Japan"/>
<h3 id="text">One Page Ad Site: Tokyo, Japan</h3></div></a>
</td>
</tr>
<tr>
<td><a href="mobile.html"><div class="sitesMobile"><img src="images/mobile.jpg" id="preview" alt="Mobile App: Tea Shoppe"/>
<h3 id="text">Mobile App: Tea Shoppe</h3></div></a>
</td>
<td><a href="roux.html"><div class="sitesRoux"><img src="images/roux.jpg" id="preview" alt="Roux Academy of Art, Media, and Design"/>
<h3 id="text">Roux Academy of Art, Media, and Design</h3></div></a>
</td>
</tr>
</table>
</div>
</body>
</html>
问题出在您的图片尺寸上。你悬停的 div 比图像大。您必须将图像宽度设置为 100%;
.sitesMobile img { width: 100%}
在 img
上使用 width: 100%
而不是 max-width
并从 #text
[=21 中删除 padding: 0
=]
make sure you should use unique id
s for each h3
element as id cannot be the same on a single page
示例:
.sitesTokyo img {
width: 100%;
}
#text {
position: absolute;
display: flex;
align-items: center; /* For vertical centering */
justify-content: center; /* For horizontal centering */
opacity: 0;
max-width: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0; /* Remove padding */
padding: 0; /* Remove margin */
}
另请查看下面的工作片段:
#preview {
max-width: 100%;
border-collapse: collapse;
}
#text {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
max-width: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
padding: 0;
}
/* Web Design Projects */
.sitesAds {
position: relative;
border-collapse: collapse;
}
.sitesAds:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.sitesTokyo {
position: relative;
border-collapse: collapse;
}
.sitesTokyo:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.sitesMobile {
position: relative;
border-collapse: collapse;
}
.sitesMobile:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.sitesRoux {
position: relative;
border-collapse: collapse;
}
.sitesRoux:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
<!DOCTYPE html>
<html>
<head>
<link href="portfolio.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Amita|Encode+Sans+Expanded|Leckerli+One|Merienda+One|Source+Sans+Pro" rel="stylesheet">
</head>
<body>
<div>
<table>
<tr>
<td><a href="ads.html"><div class="sitesAds"><img src="http://placehold.it/200x200" id="preview" alt="Banner Ads"/>
<h3 id="text">Banner Ads</h3></div></a>
</td>
<td><a href="tokyo.html"><div class="sitesTokyo"><img src="http://placehold.it/200x200" id="preview" alt="One Page Ad Site: Tokyo, Japan"/>
<h3 id="text">One Page Ad Site: Tokyo, Japan</h3></div></a>
</td>
</tr>
<tr>
<td><a href="mobile.html"><div class="sitesMobile"><img src="http://placehold.it/200x200" id="preview" alt="Mobile App: Tea Shoppe"/>
<h3 id="text">Mobile App: Tea Shoppe</h3></div></a>
</td>
<td><a href="roux.html"><div class="sitesRoux"><img src="http://placehold.it/200x200" id="preview" alt="Roux Academy of Art, Media, and Design"/>
<h3 id="text">Roux Academy of Art, Media, and Design</h3></div></a>
</td>
</tr>
</table>
</div>
</body>
</html>
希望对您有所帮助!
我有一些代码在我的图像上添加了透明框的悬停效果,并带有文本叠加层,但是透明框没有对齐图像的大小。透明框似乎要么太小(使下图的顶部和底部不透明)要么太大(导致我的页面完全不对齐)。这可能是盒子大小的问题?我想我已将其设置为自动变为图像大小的 100%,但我可能遗漏了一些东西。
Link 到我的站点:http://jchambliss.aisites.com/imd311/portfolio/sites.html
此处包含必要的代码:
#preview {
max-width: 100%;
border-collapse: collapse;
}
#text {
position: absolute;
opacity: 0;
max-width: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Web Design Projects */
.sitesAds {
position: relative;
border-collapse: collapse;
}
.sitesAds:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.sitesTokyo {
position: relative;
border-collapse: collapse;
}
.sitesTokyo:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.sitesMobile {
position: relative;
border-collapse: collapse;
}
.sitesMobile:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.sitesRoux {
position: relative;
border-collapse: collapse;
}
.sitesRoux:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
<!DOCTYPE html>
<html>
<head>
<link href="portfolio.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Amita|Encode+Sans+Expanded|Leckerli+One|Merienda+One|Source+Sans+Pro" rel="stylesheet">
</head>
<body>
<div>
<table>
<tr>
<td><a href="ads.html"><div class="sitesAds"><img src="images/ads.jpg" id="preview" alt="Banner Ads"/>
<h3 id="text">Banner Ads</h3></div></a>
</td>
<td><a href="tokyo.html"><div class="sitesTokyo"><img src="images/tokyo.jpg" id="preview" alt="One Page Ad Site: Tokyo, Japan"/>
<h3 id="text">One Page Ad Site: Tokyo, Japan</h3></div></a>
</td>
</tr>
<tr>
<td><a href="mobile.html"><div class="sitesMobile"><img src="images/mobile.jpg" id="preview" alt="Mobile App: Tea Shoppe"/>
<h3 id="text">Mobile App: Tea Shoppe</h3></div></a>
</td>
<td><a href="roux.html"><div class="sitesRoux"><img src="images/roux.jpg" id="preview" alt="Roux Academy of Art, Media, and Design"/>
<h3 id="text">Roux Academy of Art, Media, and Design</h3></div></a>
</td>
</tr>
</table>
</div>
</body>
</html>
问题出在您的图片尺寸上。你悬停的 div 比图像大。您必须将图像宽度设置为 100%;
.sitesMobile img { width: 100%}
在 img
上使用 width: 100%
而不是 max-width
并从 #text
[=21 中删除 padding: 0
=]
make sure you should use unique
id
s for eachh3
element as id cannot be the same on a single page
示例:
.sitesTokyo img {
width: 100%;
}
#text {
position: absolute;
display: flex;
align-items: center; /* For vertical centering */
justify-content: center; /* For horizontal centering */
opacity: 0;
max-width: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0; /* Remove padding */
padding: 0; /* Remove margin */
}
另请查看下面的工作片段:
#preview {
max-width: 100%;
border-collapse: collapse;
}
#text {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
max-width: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
padding: 0;
}
/* Web Design Projects */
.sitesAds {
position: relative;
border-collapse: collapse;
}
.sitesAds:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.sitesTokyo {
position: relative;
border-collapse: collapse;
}
.sitesTokyo:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.sitesMobile {
position: relative;
border-collapse: collapse;
}
.sitesMobile:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.sitesRoux {
position: relative;
border-collapse: collapse;
}
.sitesRoux:hover #text {
box-sizing: content-box;
padding: 60px 0;
opacity: 0.8;
color: #663366;
background: #FFFFFF;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
<!DOCTYPE html>
<html>
<head>
<link href="portfolio.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Amita|Encode+Sans+Expanded|Leckerli+One|Merienda+One|Source+Sans+Pro" rel="stylesheet">
</head>
<body>
<div>
<table>
<tr>
<td><a href="ads.html"><div class="sitesAds"><img src="http://placehold.it/200x200" id="preview" alt="Banner Ads"/>
<h3 id="text">Banner Ads</h3></div></a>
</td>
<td><a href="tokyo.html"><div class="sitesTokyo"><img src="http://placehold.it/200x200" id="preview" alt="One Page Ad Site: Tokyo, Japan"/>
<h3 id="text">One Page Ad Site: Tokyo, Japan</h3></div></a>
</td>
</tr>
<tr>
<td><a href="mobile.html"><div class="sitesMobile"><img src="http://placehold.it/200x200" id="preview" alt="Mobile App: Tea Shoppe"/>
<h3 id="text">Mobile App: Tea Shoppe</h3></div></a>
</td>
<td><a href="roux.html"><div class="sitesRoux"><img src="http://placehold.it/200x200" id="preview" alt="Roux Academy of Art, Media, and Design"/>
<h3 id="text">Roux Academy of Art, Media, and Design</h3></div></a>
</td>
</tr>
</table>
</div>
</body>
</html>
希望对您有所帮助!