堆栈内存溢出
  简体   繁体   English

CSS 文本悬停和过渡效果

[英]CSS Text Hover & Transition Effect

 原文  2017-02-10 04:45:50  5   2    html/ css

问题描述

I'm trying to figure out how to apply the hover effect 4 on, http://miketricking.github.io/dist/ .我想弄清楚如何在http://miketricking.github.io/dist/上应用悬停效果 4 。

I was able to come up with this test on jfiddle, https://jsfiddle.net/34aaqh70/我能够在 jfiddle 上提出这个测试， https: //jsfiddle.net/34aaqh70/

Also I can't figure out how to make that auto-responsive.我也无法弄清楚如何使自动响应。

If anybody knows of a video that explains this effect, please share!如果有人知道解释这种效果的视频，请分享！

My Code:我的代码： 

 *------ 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

It looks like your problem is you have an image with a fixed height/width sitting inside of a div set at 100%.看起来您的问题是您的图像具有固定的高度/宽度，位于 100% 的 div 内。 Try the code below.试试下面的代码。

https://jsfiddle.net/nLd80s6f/ https://jsfiddle.net/nLd80s6f/

I changed the width of the image element to 100% and tweaked the padding and margin of the overlay element to respond with the image.我将图像元素的宽度更改为 100% 并调整覆盖元素的填充和边距以响应图像。 I also wrapped the entire icon in an additional div (class "wrapper") and set the width to 80%.我还将整个图标包装在一个额外的 div（“包装器”类）中，并将宽度设置为 80%。 This was just to get the icon closer to your original size.这只是为了使图标更接近您的原始尺寸。 If you toggle it off in dev tools, you'll see why I added it.如果你在开发工具中关闭它，你就会明白我为什么添加它。

To have this icon completely responsive, you will need to add media queries to shrink the font at break points.要使此图标完全响应，您需要添加媒体查询以在断点处缩小字体。 If you have questions about how to do that, you are welcome to ask:)如果您对如何做到这一点有疑问，欢迎您提问：）

<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

You have to make some changes in your html and css code.您必须对html和css代码进行一些更改。 you need make change in .hovereffect , .hovereffect a.info class and add .hovereffect a.info span class in as below in snippet.您需要在.hovereffect 、 .hovereffect a.info类中进行更改并在代码段中添加.hovereffect a.info span类，如下所示。

I hope it will helps you :)我希望它会帮助你:) 

 .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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS3过渡效果，用于将鼠标悬停在和关闭 - CSS3 transition effect for hover on AND off CSS悬停效果转换会改变颜色吗？ - Is CSS hover effect transition changes the color? CSS3越野车悬停/过渡效果 - CSS3 buggy hover/transition effect css3中的工具提示，在悬停时具有过渡效果 - Tooltip in css3 with transition effect in hover 触摸设备的CSS过渡悬停效果 - CSS Transition hover effect for touch devices CSS转换/悬停效果在Safari中不起作用 - CSS transition/hover-effect not working in Safari CSS 悬停，同方向过渡效果 - CSS hover, transition effect in the same direction CSS animation 禁用 hover 过渡效果 - CSS animation disables hover transition effect CSS悬停效果不会在文本上触发 - CSS hover effect not triggering on text 悬停时的过渡效果 - Transition effect on hover
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM