CSS：图像预览 - 悬停时的圆形到矩形

时间：2016-01-05 22:30:27

标签： html css css-transitions

这是一个公认的简单问题，可能已经在这里问过，但我在这里苦苦挣扎。

我想要的是一个具有圆形预览的图像，在悬停时它会扩展为矩形（它也会缩放）。我所拥有的是非常接近但中心的“bobbles”，我不是空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。）当我说中心'bobbles'时，我的意思是它偏离。它很微妙但它会移动几个像素。可悲的是我不认为问题出现在我的片段中，这意味着它来自在我的CSS的其他地方：/这是在我的网站上（抱歉可爱的艺术）What the problems looks like

我想一个更好的问题是如何在没有空div的情况下实现这种效果并保证居中？

编辑2： 问题出在Firefox中。您可以在此Codepen中看到艺术“振动” http://codepen.io/StuffieStephie/pen/zrZwEQ

1 个答案:

答案 0 :(得分：1)

您获得浮动事件的原因

您已在悬停时设置了过渡属性，其中包括将元素缩放到更大的尺寸。因此，在缩放div时缩放背景图像。你正在做的是设置一个增加的宽度，这是无关紧要的，因为转换比例也做同样的事情

变化

#seasonOne:hover .test {
   transform: scale(1);
   width: 250px;
   height: 200px;
   border-radius: 0;
}

到

#seasonOne:hover .test {
        border-radius: 0;
}

这是一个片段

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

编辑：在这里查看codepen是一个片段

＆＃13;
＆＃13; 
.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%;
	}
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题