CSS：图像预览 - 悬停时从圆到矩形
CSS: Image preview - Circle-to-Rectangle on hover
这是一个公认的简单问题，可能已经在这里问过，但我在这里苦苦挣扎。
我想要的是具有圆形预览的图像，该图像在悬停时会扩展为矩形（它也可以缩放）。我所拥有的非常接近，但中心有点像“泡泡”，我不喜欢空 div 方法...
.card{
color: #ff2772;
border-radius: 15px;
margin: 3px 1px;
background-color: #2d3034;
box-sizing: border-box;
width: 300px;
min-height: 400px;
display: inline-block;
transition: .25s;
cursor:pointer;
text-align: center;
border: 1px solid #ff2772;
}
.button {
background-color: #ff2772;
color: #fff;
padding: 10px 30px;
border-radius: 10px;
}
#seasonOne .test {
background: url('http://placehold.it/250x200') 50% 50% no-repeat;
width: 200px;
height: 200px;
border-radius: 100%;
display: block;
margin: 0 auto;
transition: .3s;
transform: scale(.9);
}
#seasonOne:hover .test {
transform: scale(1);
width: 250px;
height: 200px;
border-radius: 0;
}
<div id="seasonOne" class="card seasonOne">
<h3>Season 1 (2009) - The Pilot</h3>
<div class="test">
</div>
<p class="animated smallText fadeInRight">Ut cursus purus in lacinia tincidunt. Quisque lorem odio, posuere ut aliquam vel, fringilla at enim. Duis ligula lacus, viverra et sapien rhoncus, commodo euismod ipsum.</p>
<a href="#area" class="button">Read More</a>
</div>
正如我所说，我所拥有的非常接近。它只是没有正确居中，这让我发疯。我也不喜欢必须在 CSS 而不是 HTML 中设置图像（尽管这是一个小问题）关于更好的方法有什么想法吗？
编辑：好的澄清一下：
1.) 从 .9 到 1 的比例是有意的
2.) 矩形比例 (250x200px) 很重要。它不应该是一个完美的正方形。
3.) 当我说中心“泡泡”时，我的意思是它偏离了。它很微妙，但它移动了几个像素。遗憾的是，我认为问题没有出现在我的代码片段中，这意味着它是来自我的 CSS 中的其他地方：/ 这是我网站上的（对不起，可爱的艺术）
我想一个更好的问题是如何在没有空白 div 和保证居中的情况下实现这种效果？
编辑 2：
问题出在 Firefox 中。您可以在此 Codepen 中看到艺术“振动”
http://codepen.io/StuffieStephie/pen/zrZwEQ
您收到摇摆事件的原因
您已在悬停时设置过渡 属性，其中包括将元素缩放到更大的尺寸。因此，背景图像随着 div 的缩放而缩放。另外，您正在做的是设置一个无关紧要的增加宽度，因为变换比例也在做同样的事情
改变
#seasonOne:hover .test {
transform: scale(1);
width: 250px;
height: 200px;
border-radius: 0;
}
到
#seasonOne:hover .test {
border-radius: 0;
}
这是一个片段
.card{
color: #ff2772;
border-radius: 15px;
margin: 3px 1px;
background-color: #2d3034;
box-sizing: border-box;
width: 300px;
min-height: 400px;
display: inline-block;
transition: .25s;
cursor:pointer;
text-align: center;
border: 1px solid #ff2772;
}
.button {
background-color: #ff2772;
color: #fff;
padding: 10px 30px;
border-radius: 10px;
}
#seasonOne .test {
background: url('http://placehold.it/250x200') 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 200px;
height: 200px;
border-radius: 100%;
display: block;
margin: 0 auto;
transition-property:border;
transition: .3s;
transform: scale(.9);
}
#seasonOne:hover .test {
border-radius: 0;
}
<div id="seasonOne" class="card seasonOne">
<h3>Season 1 (2009) - The Pilot</h3>
<div class="test">
</div>
<p class="animated smallText fadeInRight">Ut cursus purus in lacinia tincidunt. Quisque lorem odio, posuere ut aliquam vel, fringilla at enim. Duis ligula lacus, viverra et sapien rhoncus, commodo euismod ipsum.</p>
<a href="#area" class="button">Read More</a>
</div>
编辑：看代码笔这里是一个片段
.season img {
float: left;
max-width: 500px;
width: 100%;
animation-delay:0.1s;
}
.season p.oneP {
animation-delay:0.5s;
}
.season p.twoP {
animation-delay:0.75s;
}
.season p.threeP {
animation-delay:1s;
}
.season h2 {
border-radius: 10px 10px 0 0;
background-color: #eee;
padding: 3px;
margin-top: 0;
overflow-x: hidden;
}
.season .smallText {
animation-delay:0.2s;
overflow: hidden;
}
.season h6, .season .arts, .season h3 {
text-align: center !important;
animation-delay: 1.8s;
}
.next, .prev {
float: right;
box-sizing: border-box;
width: 49%;
animation-delay: 3s;
border: 3px solid #EEE;
border-radius: 15px;
}
.prev {
float: left;
}
.prev img.preview, .next img.preview {
float: left;
}
.previews {
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card{
color: #ff2772;
border-radius: 15px;
margin: 3px 1px;
background-color: #2d3034;
box-sizing: border-box;
width: 300px;
min-height: 400px;
display: inline-block;
transition: .25s;
cursor:pointer;
border: 1px solid #ff2772;
text-align: center;
}
.floatRight {
float: right;
margin-right: 10px;
}
#page-content .card h6 {
padding: 10px 2px;
background: none;
border-radius: 10px 10px 0 0;
transition: .3s;
border-bottom: 1px solid #fff;
}
#page-content .card .smallText {
transition: .3s;
background: none;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}
#page-content .card:hover .smallText, #page-content .card:hover h6{
background-color: #ff2772;
color: #2d3034;
}
.card:hover{
background: #fff;
}
/*
.card img {
width: 200px;
text-align: center;
border-radius: 100%;
background: #fff;
margin: 0 auto;
display: block;
transform: scale(.9);
transition: all .2s ease-in-out;
}
/*.card .test {
transform: scale(.9);
width: 200px;
height: 200px;
overflow-x: hidden;
display: block;
margin: 0 auto;
}
*/
#seasonOne .test {
padding:0;
background-color: #fff;
background: #fff url('http://i296.photobucket.com/albums/mm174/StuffieStephie/S1ChibiPreview2_zpsswyamase.png') 50% 50% no-repeat;
width: 200px;
height: 200px;
border-radius: 50%;
display: block;
margin: 0 auto;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
-moz-transform: scale(.9);
transform: scale(.9);
font-size: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#seasonOne:hover .test {
border-radius: 0;
}
hr {
margin: 0;
padding: 0;
}
img.preview {
transform: scale(.9);
width: 200px;
display: inline;
float: none;
border-radius: 10px;
transition: all .2s ease-in-out;
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
border-radius: 10px;
line-height: 0;
font-size: 0;
}
.art img.preview:nth-child(1) {
animation-delay: 2s;
}
.art img.preview:nth-child(2) {
animation-delay: 2.25s;
}
.logo{
clear:left;
padding-bottom: 10px;
}
img.preview:hover {
transform: scale(1);
box-shadow: 0 15px 15px rgba(0,0,0,0.3);
border-radius: 0;
}
.season img.no-float {
float: none;
}
@media screen and (max-width: 1200px) {
.season h6 {
clear: both;
}
}
@media screen and (max-width: 800px) {
.prev img.preview, .next img.preview {
float: left;
}
.season p {
clear: both;
}
.prev p, .next p {
clear: none;
}
.season img{
float: none;
margin: 0 auto;
text-align: center;
}
}
@media screen and (max-width: 750px) {
.card {
width: 49%;
box-sizing: border-box;
}
}
@media screen and (max-width: 600px) {
.prev, .next{
width: 100%;
float: none;
margin: 5px auto;
}
.prev img.preview, .next img.preview {
}
}
@media screen and (max-width: 399px) {
.card{
width: 100%;
}
}
<!doctype html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/2.1.0/animate.min.css">
<!-- Magnific Popup core CSS file -->
<link href='http://fonts.googleapis.com/css?family=Quicksand:700|Montserrat:700|Open+Sans|Sniglet:400,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://kamicon.net/assets/styles/mainStyles.css">
<link rel="stylesheet"
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="site-canvas">
<div id="page-content">
<section><h1>Help Me!</h1>
<p>The art shakes horribly when you hover over it in Firefox Why!?</p>
<div id="area" class="holder"></div>
<div class="previews">
<div id="seasonOne" class="card seasonOne">
<h6 class="center">Season 1 (2009) - The Pilot</h6>
<div class="test"></div>
<p class="animated smallText fadeInRight oneP">Ut cursus purus in lacinia tincidunt. Quisque lorem odio, posuere ut aliquam vel, fringilla at enim. Duis ligula lacus, viverra et sapien rhoncus, commodo euismod ipsum.</p>
<a href="#area" class="button">Read More</a>
</div>
</div>
<hr/>
</section>
</div> <!-- #page-content -->
</div><!-- #site-canvas -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
这是一个公认的简单问题，可能已经在这里问过，但我在这里苦苦挣扎。
我想要的是具有圆形预览的图像，该图像在悬停时会扩展为矩形（它也可以缩放）。我所拥有的非常接近，但中心有点像“泡泡”，我不喜欢空 div 方法...
.card{
color: #ff2772;
border-radius: 15px;
margin: 3px 1px;
background-color: #2d3034;
box-sizing: border-box;
width: 300px;
min-height: 400px;
display: inline-block;
transition: .25s;
cursor:pointer;
text-align: center;
border: 1px solid #ff2772;
}
.button {
background-color: #ff2772;
color: #fff;
padding: 10px 30px;
border-radius: 10px;
}
#seasonOne .test {
background: url('http://placehold.it/250x200') 50% 50% no-repeat;
width: 200px;
height: 200px;
border-radius: 100%;
display: block;
margin: 0 auto;
transition: .3s;
transform: scale(.9);
}
#seasonOne:hover .test {
transform: scale(1);
width: 250px;
height: 200px;
border-radius: 0;
}
<div id="seasonOne" class="card seasonOne">
<h3>Season 1 (2009) - The Pilot</h3>
<div class="test">
</div>
<p class="animated smallText fadeInRight">Ut cursus purus in lacinia tincidunt. Quisque lorem odio, posuere ut aliquam vel, fringilla at enim. Duis ligula lacus, viverra et sapien rhoncus, commodo euismod ipsum.</p>
<a href="#area" class="button">Read More</a>
</div>
正如我所说，我所拥有的非常接近。它只是没有正确居中，这让我发疯。我也不喜欢必须在 CSS 而不是 HTML 中设置图像（尽管这是一个小问题）关于更好的方法有什么想法吗？
编辑：好的澄清一下：
1.) 从 .9 到 1 的比例是有意的
2.) 矩形比例 (250x200px) 很重要。它不应该是一个完美的正方形。
3.) 当我说中心“泡泡”时，我的意思是它偏离了。它很微妙，但它移动了几个像素。遗憾的是，我认为问题没有出现在我的代码片段中，这意味着它是来自我的 CSS 中的其他地方：/ 这是我网站上的（对不起，可爱的艺术）
我想一个更好的问题是如何在没有空白 div 和保证居中的情况下实现这种效果？
编辑 2： 问题出在 Firefox 中。您可以在此 Codepen 中看到艺术“振动” http://codepen.io/StuffieStephie/pen/zrZwEQ
您收到摇摆事件的原因
您已在悬停时设置过渡 属性，其中包括将元素缩放到更大的尺寸。因此，背景图像随着 div 的缩放而缩放。另外，您正在做的是设置一个无关紧要的增加宽度，因为变换比例也在做同样的事情
改变
#seasonOne:hover .test {
transform: scale(1);
width: 250px;
height: 200px;
border-radius: 0;
}
到
#seasonOne:hover .test {
border-radius: 0;
}
这是一个片段
.card{
color: #ff2772;
border-radius: 15px;
margin: 3px 1px;
background-color: #2d3034;
box-sizing: border-box;
width: 300px;
min-height: 400px;
display: inline-block;
transition: .25s;
cursor:pointer;
text-align: center;
border: 1px solid #ff2772;
}
.button {
background-color: #ff2772;
color: #fff;
padding: 10px 30px;
border-radius: 10px;
}
#seasonOne .test {
background: url('http://placehold.it/250x200') 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 200px;
height: 200px;
border-radius: 100%;
display: block;
margin: 0 auto;
transition-property:border;
transition: .3s;
transform: scale(.9);
}
#seasonOne:hover .test {
border-radius: 0;
}
<div id="seasonOne" class="card seasonOne">
<h3>Season 1 (2009) - The Pilot</h3>
<div class="test">
</div>
<p class="animated smallText fadeInRight">Ut cursus purus in lacinia tincidunt. Quisque lorem odio, posuere ut aliquam vel, fringilla at enim. Duis ligula lacus, viverra et sapien rhoncus, commodo euismod ipsum.</p>
<a href="#area" class="button">Read More</a>
</div>
编辑：看代码笔这里是一个片段
.season img {
float: left;
max-width: 500px;
width: 100%;
animation-delay:0.1s;
}
.season p.oneP {
animation-delay:0.5s;
}
.season p.twoP {
animation-delay:0.75s;
}
.season p.threeP {
animation-delay:1s;
}
.season h2 {
border-radius: 10px 10px 0 0;
background-color: #eee;
padding: 3px;
margin-top: 0;
overflow-x: hidden;
}
.season .smallText {
animation-delay:0.2s;
overflow: hidden;
}
.season h6, .season .arts, .season h3 {
text-align: center !important;
animation-delay: 1.8s;
}
.next, .prev {
float: right;
box-sizing: border-box;
width: 49%;
animation-delay: 3s;
border: 3px solid #EEE;
border-radius: 15px;
}
.prev {
float: left;
}
.prev img.preview, .next img.preview {
float: left;
}
.previews {
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card{
color: #ff2772;
border-radius: 15px;
margin: 3px 1px;
background-color: #2d3034;
box-sizing: border-box;
width: 300px;
min-height: 400px;
display: inline-block;
transition: .25s;
cursor:pointer;
border: 1px solid #ff2772;
text-align: center;
}
.floatRight {
float: right;
margin-right: 10px;
}
#page-content .card h6 {
padding: 10px 2px;
background: none;
border-radius: 10px 10px 0 0;
transition: .3s;
border-bottom: 1px solid #fff;
}
#page-content .card .smallText {
transition: .3s;
background: none;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}
#page-content .card:hover .smallText, #page-content .card:hover h6{
background-color: #ff2772;
color: #2d3034;
}
.card:hover{
background: #fff;
}
/*
.card img {
width: 200px;
text-align: center;
border-radius: 100%;
background: #fff;
margin: 0 auto;
display: block;
transform: scale(.9);
transition: all .2s ease-in-out;
}
/*.card .test {
transform: scale(.9);
width: 200px;
height: 200px;
overflow-x: hidden;
display: block;
margin: 0 auto;
}
*/
#seasonOne .test {
padding:0;
background-color: #fff;
background: #fff url('http://i296.photobucket.com/albums/mm174/StuffieStephie/S1ChibiPreview2_zpsswyamase.png') 50% 50% no-repeat;
width: 200px;
height: 200px;
border-radius: 50%;
display: block;
margin: 0 auto;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
-moz-transform: scale(.9);
transform: scale(.9);
font-size: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#seasonOne:hover .test {
border-radius: 0;
}
hr {
margin: 0;
padding: 0;
}
img.preview {
transform: scale(.9);
width: 200px;
display: inline;
float: none;
border-radius: 10px;
transition: all .2s ease-in-out;
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
border-radius: 10px;
line-height: 0;
font-size: 0;
}
.art img.preview:nth-child(1) {
animation-delay: 2s;
}
.art img.preview:nth-child(2) {
animation-delay: 2.25s;
}
.logo{
clear:left;
padding-bottom: 10px;
}
img.preview:hover {
transform: scale(1);
box-shadow: 0 15px 15px rgba(0,0,0,0.3);
border-radius: 0;
}
.season img.no-float {
float: none;
}
@media screen and (max-width: 1200px) {
.season h6 {
clear: both;
}
}
@media screen and (max-width: 800px) {
.prev img.preview, .next img.preview {
float: left;
}
.season p {
clear: both;
}
.prev p, .next p {
clear: none;
}
.season img{
float: none;
margin: 0 auto;
text-align: center;
}
}
@media screen and (max-width: 750px) {
.card {
width: 49%;
box-sizing: border-box;
}
}
@media screen and (max-width: 600px) {
.prev, .next{
width: 100%;
float: none;
margin: 5px auto;
}
.prev img.preview, .next img.preview {
}
}
@media screen and (max-width: 399px) {
.card{
width: 100%;
}
}
<!doctype html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/2.1.0/animate.min.css">
<!-- Magnific Popup core CSS file -->
<link href='http://fonts.googleapis.com/css?family=Quicksand:700|Montserrat:700|Open+Sans|Sniglet:400,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://kamicon.net/assets/styles/mainStyles.css">
<link rel="stylesheet"
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="site-canvas">
<div id="page-content">
<section><h1>Help Me!</h1>
<p>The art shakes horribly when you hover over it in Firefox Why!?</p>
<div id="area" class="holder"></div>
<div class="previews">
<div id="seasonOne" class="card seasonOne">
<h6 class="center">Season 1 (2009) - The Pilot</h6>
<div class="test"></div>
<p class="animated smallText fadeInRight oneP">Ut cursus purus in lacinia tincidunt. Quisque lorem odio, posuere ut aliquam vel, fringilla at enim. Duis ligula lacus, viverra et sapien rhoncus, commodo euismod ipsum.</p>
<a href="#area" class="button">Read More</a>
</div>
</div>
<hr/>
</section>
</div> <!-- #page-content -->
</div><!-- #site-canvas -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>