1. 首頁
  2. 問答
  3. CSS文字懸停及過渡效果

CSS文字懸停及過渡效果

2017-02-10 167 views
1

我試圖找出如何應用懸停效果4上， http://miketricking.github.io/dist/。CSS文字懸停及過渡效果

我能想出這個測試上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>

來源

2017-02-10 Isaiah

+0

您想要這種效果嗎？請檢查小提琴https://jsfiddle.net/34aaqh70/3/ –

回答

1

它看起來像你的問題是你有一個固定的高度/寬度在100％坐在一個div一套內部的圖像。嘗試下面的代碼。

https://jsfiddle.net/nLd80s6f/

予改變的圖像元素的寬度爲100％和調整所述覆蓋元件的填充和餘量與圖像作出響應。我還將整個圖標包裹在一個額外的div（class「wrapper」）中，並將寬度設置爲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); 
}

來源

2017-02-10 05:50:25 Chelsea

+0

謝謝你的幫助。 – Isaiah

0

你必須使你的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>

來源

2017-02-10 05:50:07

 相關問題

  • 暫無相關問題^_^