html - 我正在尝试使用 CSS3 Transitions 实现悬停效果

标签 html css twitter-bootstrap

我想要实现的是制作悬停效果，当光标悬停在图标上时，标题将从左侧滑动。让它看起来像是在替换图标本身。 下图是我目前正在处理的内容。我无法弄清楚 CSS 上的哪一部分使其不适合内部。

This is the Image

我正在尝试使用 Twitter Bootstrap 来实现这一点。发现hover效果here .

HTML

<div class="content">
        <div class="container row">
        <!-- Icon row -->
            <div class="view view-fifth span1">
                <img src="images/bahay-dito.png" />
                <div class="mask">
                    <h2>Bahay Dito</h2>
                    <a href="#" class="info">View</a>
                </div>
            </div>
        </div>
</div>

CSS

.view {
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
}
.view .mask,.view .content {

   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view h2 {
   color: red;
   text-align: center;
   position: relative;
   font-size: 15px;
   padding: 10px;
   background: red;
   margin: 20px 0 0 0;
}
.view p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

第五效果的样式

.view-fifth img {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
   background-color: rgba(146,96,91,0.3);
   -webkit-transform: translateX(-300px);
   -moz-transform: translateX(-300px);
   -o-transform: translateX(-300px);
   -ms-transform: translateX(-300px);
   transform: translateX(-300px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-fifth h2 {
   background: rgba(255, 255, 255, 0.5);
   color: #000;
   -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   color: #333;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-fifth:hover .mask {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);
}
.view-fifth:hover img {
   -webkit-transform: translateX(300px);
   -moz-transform: translateX(300px);
   -o-transform: translateX(300px);
   -ms-transform: translateX(300px);
   transform: translateX(300px);
}
.view-fifth:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

最佳答案

这是你想要的吗？

http://jsfiddle.net/9DLmb/1/ 

.container {
width:238px;
height:198px;
overflow:hidden;
}
.view {
float: left;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
}
.view .mask, .view .content {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view h2 {
color: red;
text-align: center;
position: relative;
font-size: 15px;
padding: 10px;
background: red;
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-fifth img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
background-color: rgba(146, 96, 91, 0.3);
-webkit-transform: translateX(-300px);
-moz-transform: translateX(-300px);
-o-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
width:238px;
height:203px;
}
.view-fifth h2 {
background: rgba(255, 255, 255, 0.5);
color: #000;
-webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p {
-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #333;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-fifth:hover .mask {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.view-fifth:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
}
.view-fifth:hover p {
-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

这是你想要的吗？

关于html - 我正在尝试使用 CSS3 Transitions 实现悬停效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18228932/

上一篇：css - DIV的位置和高度

下一篇：html - Bootstrap : Slider on 2 spans ? - 一个跨度=图像，一个跨度=文本 block

相关文章：

html - 如何在保持图像响应能力的同时在 Bootstrap 中将模板化显示控件居中？

html - 如何使用 Bootstrap 2.3.1 对齐这两行？

html - 如何根据内容动态设置div的宽度和高度

javascript - 滚动到时更改元素的背景颜色

javascript - 如何打开动态创建的模式已打开的页面

javascript - 悬停建议以外的 css 过渡效果 onload

python - Django 中的 CSS 表格样式未显示表格设计

html - 开发网站时如何控制画外音朗读的内容

html - CSS 按钮边框由于某种原因无法正常工作

html - 打印 html 表格

©2024 IT工具网  联系我们