CSS 文本悬停和过渡效果
[英]CSS Text Hover & Transition Effect
问题描述
我想弄清楚如何在http://miketricking.github.io/dist/上应用悬停效果 4 。
我能够在 jfiddle 上提出这个测试， https: //jsfiddle.net/34aaqh70/
我也无法弄清楚如何使自动响应。
如果有人知道解释这种效果的视频，请分享！
我的代码：
*------ Basic Setup ------*/ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: white; color: #fff; font-family: 'Raleway', 'Lato', 'Arial', sans-serif; font-weight: normal; font-size: 20px; text-rendering: optimizeLegibility; overflow-x: hidden; } .clearfix { zoom: 1 } .clearfix:after { content: '.'; clear: both; display: block; height: 0; visibility: hidden; } .row { max-width: 1140px; margin: 0 auto; } /*------ Dividers ------*/ .divider { width: 25%; height: 30px; border-bottom: 1px solid rgba(89, 89, 89, 0.65); text-align: center; margin: auto; margin-bottom: 4%; } .divider span { font-size: 200%; background-color: white; padding: 0 10px; } /*------ DV BOX ------*/ .dv-box { padding-bottom: 5%; } /*------ Donation ------*/ .donate { padding-top: 5%; background-color: white; } .donate-content { color: grey; text-align: center; } .donate h1 { margin-bottom: 0%; } .donate-content .description { margin-top: 0%; } .donate-content p { padding-left: 5%; padding-right: 5%; } .donate img { width: 50%; height: auto; opacity: 1; } .donate img:hover { opacity: .7; } /*------ Volunteer ------*/ .volunteer { padding-top: 5%; background-color: white; padding-bottom: 5%; } .volunteer-content { color: grey; text-align: center; } .volunteer h1 { margin-bottom: -.5%; } .volunteer-content .description { margin-top: 0%; } .volunteer-content p { padding-left: 5%; padding-right: 5%; } .volunteer img { width: 60%; height: auto; opacity: .9; } .volunteer img:hover { opacity: 0.7; }
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </head> <body> <div class="row dv-box"> <!--Donate--> <div class="col-md-6"> <section class="donate" id="donate"> <div class="donate-content"> <h1>Donate</h1> <div class="divider"> <span><i class="fa fa-paw" aria-hidden="true"></i></span> </div> <div class="col-lg-12 description"> <p>We are always looking for people to help us!</p> <p>Click on the image below, to fill out the application form</p> <br> <a href="#"> <img src="http://i.imgur.com/SDtdEQE.png" alt=""> </a> </div> </div> </section> </div> <!--Volunteer--> <div class="col-md-6"> <section class="volunteer" id="volunteer"> <div class="volunteer-content"> <h1>Volunteer</h1> <div class="divider"> <span><i class="fa fa-paw" aria-hidden="true"></i></span> </div> <div class="col-lg-12 description"> <p>We are always looking for people to help us!</p> <p>Click on the image below, to fill out the application form</p> <a href="#"> <img src="http://i.imgur.com/Z5nGc0D.png" target="_blank" alt="form"> </a> </div> </div> </section> </div> </div> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2017-02-10 05:50:25
看起来您的问题是您的图像具有固定的高度/宽度，位于 100% 的 div 内。 试试下面的代码。
https://jsfiddle.net/nLd80s6f/
我将图像元素的宽度更改为 100% 并调整覆盖元素的填充和边距以响应图像。 我还将整个图标包装在一个额外的 div（“包装器”类）中，并将宽度设置为 80%。 这只是为了使图标更接近您的原始尺寸。 如果你在开发工具中关闭它，你就会明白我为什么添加它。
要使此图标完全响应，您需要添加媒体查询以在断点处缩小字体。 如果您对如何做到这一点有疑问，欢迎您提问：）
<div class="wrapper">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://i.imgur.com/TqiQO5M.png" alt="">
<div class="overlay">
<a class="info" href="#">Donate</a>
</div>
</div>
</div>
</div>
.wrapper {
width: 80%;
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect img {
display: block;
position: relative;
width: 100%;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
border: solid #00ffffff;
border-radius: 50%;
box-shadow: 0 0 5px #fff;
;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(48, 152, 157, 0.4);
}
.hovereffect a.info {
font-size: 400%;
width: 80%;
height: 80%;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
border-radius: 50%;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
margin: 10%;
padding: 30% 10%;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
解决方案2
0 2017-02-10 05:50:07
您必须对html和css代码进行一些更改。 您需要在.hovereffect 、 .hovereffect a.info类中进行更改并在代码段中添加.hovereffect a.info span类，如下所示。
我希望它会帮助你:)
.hovereffect { /*width: 100%;*/ /*height: 100%;*/ float: left; overflow: hidden; position: relative; text-align: center; cursor: default; } .hovereffect img { display: block; position: relative; } .hovereffect .overlay { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; border: solid #00ffff; border-radius: 50%; box-shadow: 0 0 5px #fff;; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .hovereffect:hover .overlay { background-color: rgba(48, 152, 157, 0.4); } .hovereffect a.info { font-size: 3em; display: inline-block; text-decoration: none; padding: 25px 25px; text-transform: uppercase; color: #fff; border: 1px solid #fff; border-radius: 50%; background-color: transparent; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; font-weight: normal; margin: 5% auto; /*padding: 150px 80px;*/ height:90%; width: 90%; box-sizing: border-box; text-align: center; vertical-align: middle; position: relative; } .hovereffect a.info span { position: absolute; top: 0; bottom: 0; margin: auto; height: 55px; width: 100%; left: 0; right: 0; } .hovereffect:hover a.info { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="hovereffect"> <img class="img-responsive" src="http://i.imgur.com/TqiQO5M.png" alt=""> <div class="overlay"> <a class="info" href="#"> <span>Donate</span> </a> </div> </div> </div>
CSS3过渡效果，用于将鼠标悬停在和关闭
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.