Как убрать прыгания при наведении на блок?

139
08 декабря 2020, 13:30

Верстаю тренировочный макет(на названия классов и id забил). Не могу решить проблему, когда при наведении все скачет, в том числе и фон. Убирал отступы, но решить не получилось. В чем проблема ? P.S Не судите строго, я верстаю не так давно(

.women_bags { 
  border: 0px solid #F3F3F3; 
  box-shadow: 0px 0px 48px 3px rgba(237, 235, 253, 0.75); 
  text-align: center; 
  margin: auto; 
  margin-top: 20%; 
  width: 95%; 
} 
 
.women_bags h2 { 
  text-align: center; 
} 
 
.like { 
  display: none; 
  height: 18px; 
  width: 20px; 
  float: left; 
  margin: 30px 10px 0px 30px; 
  color: red; 
} 
 
.likes { 
  display: none; 
  float: left; 
  padding: 15px 0px 0px 0px; 
} 
 
.comments { 
  display: none; 
  float: right; 
  padding: 15px 0px 0px 0px; 
} 
 
.comment { 
  display: none; 
  height: 21px; 
  width: 25px; 
  float: right; 
  margin: 30px 30px 0px 10px; 
} 
 
.women_bags #women_bag_1, 
#women_bag_2, 
#women_bag_3, 
#women_bag_4, 
#women_bag_5, 
#women_bag_6 { 
  width: 226px; 
  height: 245px; 
  padding: 0px 39px 0px 39px; 
} 
 
.women_bags div { 
  display: inline-block; 
  height: 505px; 
  width: 330px; 
  margin: 5%; 
} 
 
.info_bag { 
  font-family: "Open Sans"; 
  font-size: 18px; 
  text-align: center; 
} 
 
.price { 
  font-family: "Open Sans - Semibold"; 
  font-size: 25px; 
  text-align: center; 
} 
 
.buy_button { 
  display: none; 
  width: 129px; 
  height: 48px; 
  color: #ffffff; 
  font-family: "Open Sans - Semibold"; 
  font-size: 25px; 
  box-shadow: -1px 5px 24px 1px rgba(240, 239, 254, 0.99); 
  background-color: #fcfcfc; 
  background-image: linear-gradient(26deg, #8c84f9 28%, #a165f4 50%); 
  padding: 20px 40px 5px 40px; 
  margin: auto; 
  border-radius: 35px; 
} 
 
.women_bags div:hover { 
  outline: 0px solid; 
  box-shadow: -1px 5px 48px 3px rgba(221, 223, 224, 0.99); 
} 
 
.women_bags div:hover .price { 
  color: #8c84f9; 
  font-family: "Open Sans - Semibold"; 
  font-size: 35px; 
  font-weight: 900; 
} 
 
.women_bag_1:hover .like, 
.women_bag_2:hover .like, 
.women_bag_3:hover .like, 
.women_bag_4:hover .like, 
.women_bag_5:hover .like, 
.women_bag_6:hover .like { 
  display: block; 
} 
 
.women_bag_1:hover .comment, 
.women_bag_2:hover .comment, 
.women_bag_3:hover .comment, 
.women_bag_4:hover .comment, 
.women_bag_5:hover .comment, 
.women_bag_6:hover .comment { 
  display: block; 
} 
 
.women_bag_1:hover .likes, 
.women_bag_2:hover .likes, 
.women_bag_3:hover .likes, 
.women_bag_4:hover .likes, 
.women_bag_5:hover .likes, 
.women_bag_6:hover .likes { 
  display: block; 
} 
 
.women_bag_1:hover .comments, 
.women_bag_2:hover .comments, 
.women_bag_3:hover .comments, 
.women_bag_4:hover .comments, 
.women_bag_5:hover .comments, 
.women_bag_6:hover .comments { 
  display: block; 
} 
 
.women_bag_1:hover .buy_button, 
.women_bag_2:hover .buy_button, 
.women_bag_3:hover .buy_button, 
.women_bag_4:hover .buy_button, 
.women_bag_5:hover .buy_button, 
.women_bag_6:hover .buy_button { 
  display: block; 
}
<div class="women_bags"> 
  <div class="women_bag_1"> 
    <img src="images/object_like.svg" alt="like" class="like"> 
    <p class="likes">253</p> 
    <img src="images/object_comment.svg" alt="comment" class="comment"> 
    <p class="comments">120</p> 
    <img src="images/women_bag_1.svg" alt="women_bag_1" id="women_bag_1"> 
    <p class="info_bag">Black Genuine Leather Bags</p> 
    <p class="price">$ 23.20</p> 
    <a href="" class="buy_button">Add to Cart</a> 
  </div> 
  <div class="women_bag_2"> 
    <img src="images/object_like.svg" alt="like" class="like"> 
    <p class="likes">65</p> 
    <img src="images/object_comment.svg" alt="comment" class="comment"> 
    <p class="comments">180</p> 
    <img src="images/women_bag_2.svg" alt="women_bag_2" id="women_bag_2"> 
    <p class="info_bag">Fashion Red Leather Bags</p> 
    <p class="price">$ 20.16</p> 
    <a href="" class="buy_button">Add to Cart</a> 
  </div> 
  <div class="women_bag_3"> 
    <img src="images/object_like.svg" alt="like" class="like"> 
    <p class="likes">143</p> 
    <img src="images/object_comment.svg" alt="comment" class="comment"> 
    <p class="comments">15</p> 
    <img src="images/women_bag_3.svg" alt="women_bag_3" id="women_bag_3"> 
    <p class="info_bag">Fashion Genuine Leather Bags</p> 
    <p class="price">$ 30.14</p> 
    <a href="" class="buy_button">Add to Cart</a> 
  </div><br> 
  <div class="women_bag_4"> 
    <img src="images/object_like.svg" alt="like" class="like"> 
    <p class="likes">333</p> 
    <img src="images/object_comment.svg" alt="comment" class="comment"> 
    <p class="comments">155</p> 
    <img src="images/women_bag_4.svg" alt="women_bag_4" id="women_bag_4"> 
    <p class="info_bag">Simply Leather Bags</p> 
    <p class="price">$ 15.20</p> 
    <a href="" class="buy_button">Add to Cart</a> 
  </div> 
  <div class="women_bag_5"> 
    <img src="images/object_like.svg" alt="like" class="like"> 
    <p class="likes">98</p> 
    <img src="images/object_comment.svg" alt="comment" class="comment"> 
    <p class="comments">191</p> 
    <img src="images/women_bag_5.svg" alt="women_bag_5" id="women_bag_5"> 
    <p class="info_bag">New Fashion Leather Bags</p> 
    <p class="price">$ 25.20</p> 
    <a href="" class="buy_button">Add to Cart</a> 
  </div> 
  <div class="women_bag_6"> 
    <img src="images/object_like.svg" alt="like" class="like"> 
    <p class="likes">508</p> 
    <img src="images/object_comment.svg" alt="comment" class="comment"> 
    <p class="comments">311</p> 
    <img src="images/women_bag_6.svg" alt="women_bag_6" id="women_bag_6"> 
    <p class="info_bag">Single Hand Models Bags</p> 
    <p class="price">$ 17.6</p> 
    <a href="" class="buy_button">Add to Cart</a> 
  </div> 
</div>

Answer 1

Много что изменил. Для исчезновения не используйте display:none;
Вам остаётся только цифры там изменить.

.women_bags { 
	margin-top: 50px; 
	border: 0px solid #F3F3F3; 
	box-shadow: 0px 0px 48px 3px rgba(237, 235, 253, 0.75); 
	width: 1000px; 
	overflow: hidden; 
} 
 
.women_bags h2 { 
	text-align: center; 
} 
 
.women_bag{ 
	display: inline-block; 
	margin: auto; 
	padding: 0px 20px; 
	width: 300px; 
	height: 520px; 
} 
 
.women_bag:hover { 
	outline: 0px solid; 
	box-shadow: -1px 5px 48px 3px rgba(221, 223, 224, 0.99); 
} 
 
.like { 
	height: 18px; 
	width: 20px; 
	float: left; 
	margin: 30px 0px 0px 0px; 
	color: red; 
} 
 
.likes { 
	float: left; 
	padding: 15px 0px 0px 0px; 
} 
 
.comment { 
	height: 21px; 
  	width: 25px; 
  	float: right; 
  	margin: 30px 0px 0px 0px; 
} 
 
.comments { 
	float: right; 
  	padding: 15px 0px 0px 0px; 
} 
 
.status{ 
	width: 100%; 
	height: 75px; 
	opacity: 0; 
} 
 
.women_bag_img{ 
	width: 200px; 
	height: 250px; 
} 
 
.info_bag { 
	display: block; 
	width: 100%; 
	font-family: "Open Sans"; 
	font-size: 18px; 
	text-align: center; 
} 
 
.price { 
	font-family: "Open Sans - Semibold"; 
	font-size: 25px; 
	text-align: center; 
} 
 
.buy_button { 
	width: 120px; 
	height: 25px; 
	color: #ffffff; 
	font-family: "Open Sans - Semibold"; 
	text-decoration: none; 
	font-size: 25px; 
	box-shadow: -1px 5px 24px 1px rgba(240, 239, 254, 0.99); 
	background-color: #fcfcfc; 
	background-image: linear-gradient(26deg, #8c84f9 28%, #a165f4 50%); 
	padding: 15px; 
	border-radius: 35px; 
	opacity: 0; 
} 
 
.women_bag:hover .price { 
	color: #8c84f9; 
	font-family: "Open Sans - Semibold"; 
	font-weight: 900; 
} 
 
.women_bag:hover .status{ 
	opacity: 1; 
} 
 
.women_bag:hover .buy_button{ 
	opacity: 1; 
}
<!DOCTYPE html> 
<html> 
<head> 
	<title></title> 
	<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
	<center> 
		<div class="women_bags"> 
			<div class="women_bag"> 
				<div class="status"> 
					<img src="images/object_like.svg" class="like"> 
					<p class="likes">253</p> 
					<p class="comments">120</p> 
					<img src="images/object_comment.svg" class="comment"> 
				</div> 
				<center> 
					<img src="images/women_bag_1.svg" class="women_bag_img"> 
				</center> 
				<p class="info_bag">Black Genuine Leather Bags</p> 
				<p class="price">$ 23.20</p> 
				<center> 
					<a href="" class="buy_button">Add to Cart</a> 
				</center> 
			</div> 
			<div class="women_bag"> 
				<div class="status"> 
					<img src="images/object_like.svg" class="like"> 
					<p class="likes">253</p> 
					<p class="comments">120</p> 
					<img src="images/object_comment.svg" class="comment"> 
				</div> 
				<center> 
					<img src="images/women_bag_1.svg" class="women_bag_img"> 
				</center> 
				<p class="info_bag">Black Genuine Leather Bags</p> 
				<p class="price">$ 23.20</p> 
				<center> 
					<a href="" class="buy_button">Add to Cart</a> 
				</center> 
			</div> 
			<div class="women_bag"> 
				<div class="status"> 
					<img src="images/object_like.svg" class="like"> 
					<p class="likes">253</p> 
					<p class="comments">120</p> 
					<img src="images/object_comment.svg" class="comment"> 
				</div> 
				<center> 
					<img src="images/women_bag_1.svg" class="women_bag_img"> 
				</center> 
				<p class="info_bag">Black Genuine Leather Bags</p> 
				<p class="price">$ 23.20</p> 
				<center> 
					<a href="" class="buy_button">Add to Cart</a> 
				</center> 
			</div> 
			<div class="women_bag"> 
				<div class="status"> 
					<img src="images/object_like.svg" class="like"> 
					<p class="likes">253</p> 
					<p class="comments">120</p> 
					<img src="images/object_comment.svg" class="comment"> 
				</div> 
				<center> 
					<img src="images/women_bag_1.svg" class="women_bag_img"> 
				</center> 
				<p class="info_bag">Black Genuine Leather Bags</p> 
				<p class="price">$ 23.20</p> 
				<center> 
					<a href="" class="buy_button">Add to Cart</a> 
				</center> 
			</div> 
			<div class="women_bag"> 
				<div class="status"> 
					<img src="images/object_like.svg" class="like"> 
					<p class="likes">253</p> 
					<p class="comments">120</p> 
					<img src="images/object_comment.svg" class="comment"> 
				</div> 
				<center> 
					<img src="images/women_bag_1.svg" class="women_bag_img"> 
				</center> 
				<p class="info_bag">Black Genuine Leather Bags</p> 
				<p class="price">$ 23.20</p> 
				<center> 
					<a href="" class="buy_button">Add to Cart</a> 
				</center> 
			</div> 
			<div class="women_bag"> 
				<div class="status"> 
					<img src="images/object_like.svg" class="like"> 
					<p class="likes">253</p> 
					<p class="comments">120</p> 
					<img src="images/object_comment.svg" class="comment"> 
				</div> 
				<center> 
					<img src="images/women_bag_1.svg" class="women_bag_img"> 
				</center> 
				<p class="info_bag">Black Genuine Leather Bags</p> 
				<p class="price">$ 23.20</p> 
				<center> 
					<a href="" class="buy_button">Add to Cart</a> 
				</center> 
			</div> 
		</div> 
	</center> 
</body> 
</html>

READ ALSO
Увеличение под размер монитора translate

Увеличение под размер монитора translate

Есть строка которая уменьшает весь обьект

98
Как подключить скрипт Python в C#? [дубликат]

Как подключить скрипт Python в C#? [дубликат]

У меня есть некий скрипт на питоне(со сторонними библиотеками)Я хочу его подключить в готовый C# проект

116
Можно ли сделать контроллер синглтоном (Singletone)

Можно ли сделать контроллер синглтоном (Singletone)

Есть "легаси" проект на ASPNET MVC 4 Как я выяснил в отладчике все контроллеры (а также и репозитории) не являются синглтонами, а создаются каждый...

140