CSS图像缩放效果打破缩略图页脚

时间：2017-11-15 13:41:48

标签： html css css3 hover

我正在创建一个新项目，其中我使用缩放效果和css 3，但在底部的拇指部分我有视频统计信息，它在鼠标悬停时移动到顶部。

你知道如何修复视频统计数据吗？

DEMO：https://jsfiddle.net/gazi/dbLcq3cj/

的CSS：

.video-item {width: 24.6%;display:inline-block;display: -moz-inline-stack;vertical-align: top;zoom: 1;*display: inline;margin-bottom: 10px;padding: 0 5px;}
.video-item {display:inline-block;display: -moz-inline-stack;vertical-align: top;zoom: 1;*display: inline;margin-bottom: 10px;padding: 0 5px;}
.video-item-thumb {display: block;position: relative;height: 154px;padding: 7px;overflow: hidden;}
.video-item .outline {position: relative;border: 1px solid transparent;overflow: hidden;-webkit-backface-visibility: hidden;}
.video-item-thumb {height: 197px !important;}
.video-item:hover .video-item-thumb {-webkit-backface-visibility: hidden;overflow:hidden;height: 197px;}
.video-item-thumb {display: inline-block;}
.video-item-thumb img{width: 100% !important;}
.video-item:hover .video-item-thumb .wrapper {-webkit-transform: scale(1.6);-ms-transform: scale(1.6);transform: scale(1.6);}

/* Featured */
.video-item.featured {width: 33%;height: 280px;}
.video-item.featured.video-item-thumb {height: 197px;}
.video-item.featured:hover .video-item-thumb {height: 210px;}
.video-item.featured:hover .video-item-thumb .wrapper {-webkit-transform: scale(1.5);-ms-transform: scale(1.6);transform: scale(1.6);}


.outline .video-item-thumb {width: 100%;}
.video-item-title,.featured .video-item-title {padding: 0 5px;height: 22px;}
.video-item-title h2,.featured .video-item-title h2 {font-size: 15px;line-height: 22px;height: 22px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.video-item-footer,.featured .video-item-footer {padding: 10px 5px;}
.video-item-footer .video-stats p,.featured .video-item-footer .video-stats p {font-size: 12px;}
.video-item-footer .video-stats p.stat-rating,.featured .video-item-footer .video-stats p.stat-rating {font-size: 18px;}
.video-item-footer .video-stats p.stat-rating .ico,.featured .video-item-footer .video-stats p.stat-rating .ico {font-size: 15px;}
/* Thumbnail Footer */
.video-item-thumb span.ico,.video-item-thumb span.duration {display: block;position: absolute;-webkit-transition: .3s opacity;transition: .3s opacity;}
.video-item-thumb .wrapper {overflow: hidden;max-width: 100%;max-height: 100%;}
.video-item-thumb:hover span.duration {opacity: 0;}
.video-item-thumb span.ico-play {opacity: 0;width: 38px;height: 38px;right: 18px;bottom: 18px;-webkit-border-radius: 38px;-moz-border-radius: 38px;-ms-border-radius: 38px;border-radius: 38px;text-align: center;font-size: 15px;line-height: 38px;}
.video-item-thumb:hover span.ico-play {opacity: 1;}
.video-item-thumb span.ico-hd {left: 13px;bottom: 13px;font-size: 11px;padding: 10px 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;border-radius: 3px;}
.video-item-thumb span.duration {right: 13px;bottom: 13px;padding: 6px;font-size: 10px;line-height: 10px;-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;border-radius: 3px;}
.video-item-title {display: block;padding: 0 7px;height: 40px;text-decoration: none;}
.video-item-title h2 {font-size: 15px;line-height: 18px;font-weight: 400;margin: 0;max-width: 100%;height: 40px;white-space: normal;overflow: hidden;}
.video-item-footer {padding: 15px 7px 10px 7px;border-top: 1px solid transparent;height: 48px;}
.video-item-footer .video-stats .stat {float: left;width: 33%;border-right: 1px solid transparent;}
.video-item-footer .video-stats .stat:last-child {border-right: 0 none;}
.video-item-footer .video-stats p {margin: 0;font-size: 13px;line-height: 22px;height: 22px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.video-item-footer .video-stats p.stat-views {padding-right: 8px;}
.video-item-footer .video-stats p.stat-when {text-align: center;}
.video-item-footer .video-stats p.stat-rating {font-size: 20px;text-align: right;}
.video-item-footer .video-stats p.stat-rating .ico {font-size: 16px;}
.video-item-thumb span.ico,.video-item-thumb span.duration {background: rgba(25,26,34,0.7);color: #fff;}
.video-item-thumb span.ico-play {text-shadow: 1px 1px 5px rgba(0,0,0,0.75);}
.video-item-title {color: #2b2c33}
.video-item-footer {border-color: #d2d2d2;}
.video-item-footer .video-stats .stat {border-color: #3d3d3d;}
/*E RE*/
.video-item:hover .video-item-title,.video-item.featured:hover .video-item-title {height: 0 !important;padding: 0 !important;}
.video-item.featured .video-item-thumb:after {top: 6px;left: 6px;}
.video-item-thumb .site-wrap {position: absolute;top: 0;left: 0;width: 100%;height: 100%;font-size: 0;text-align: center;vertical-align: middle;background-color: rgba(0,0,0,0.3);-moz-opacity: 0;opacity: 0;filter: alpha(opacity=0);}
.video-item-thumb .site-wrap:before {content: '';display: inline-block;height: 100%;vertical-align: middle;}
.video-item-thumb .site-wrap .site-info {display: inline-block;vertical-align: middle;width: 99%;}
.video-item-thumb .site-info .btn-play {display: block;position: relative;margin: 0 auto;width: 36px;height: 36px;-webkit-border-radius: 36px;-moz-border-radius: 36px;-ms-border-radius: 36px;border-radius: 36px;}
.video-item-thumb .site-info .btn-play:before {content: '';display: block;position: absolute;top: 50%;left: 50%;margin-top: -7px;margin-left: -5px;border-left: 10px solid #fff;border-top: 7px solid transparent;border-bottom: 7px solid transparent;}
.video-item-thumb .site-info .site-logo {display: block;margin-top: 10px;width: 100%;height: 64px;background-repeat: no-repeat;background-color: transparent;}
/*ZOOM on HOVER */
.video-item-thumb:before {content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
.video-item-thumb,.video-item-thumb:before,.video-item-thumb .wrapper,.video-item-thumb .site-wrap,.video-item .video-item-title {transition: all 0.3s;}
.video-item .video-item-title {overflow: hidden;}
.video-item:hover .video-item-thumb .wrapper {-webkit-transform: scale(1.35);-ms-transform: scale(1.35);transform: scale(1.35);}

我尝试了位置：绝对和相对，但我没有运气

1 个答案:

答案 0 :(得分：0)

问题是你在设置：

.video-item:hover .video-item-title, .video-item.featured:hover .video-item-title {
    height: 0 !important;
    padding: 0 !important;
}

因此，在悬停时，您将标题的高度设置为0.如果您不打算，请尝试从代码中删除该行。

修改

如果我找到了你，你只想隐藏标题，但保留一切。为实现这一目标：

设置过渡到标题：

.video-item-title h2, .featured .video-item-title h2 {
    transition: all 0.3s;
}

并删除：

.video-item:hover .video-item-title, .video-item.featured:hover .video-item-title {
    height: 0 !important;
    padding: 0 !important;
}

改为使用：

.video-item:hover .video-item-title h2, .video-item.featured:hover .video-item-title h2{
    height: 0 !important;
    padding: 0 !important;
}

所以你只缩小h2本身而不是整个容器。

相关问题
最新问题