Верстаю тренировочный макет(на названия классов и 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>
Много что изменил. Для исчезновения не используйте 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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Имеется следующий интерфейс:
У меня есть некий скрипт на питоне(со сторонними библиотеками)Я хочу его подключить в готовый C# проект
Есть "легаси" проект на ASPNET MVC 4 Как я выяснил в отладчике все контроллеры (а также и репозитории) не являются синглтонами, а создаются каждый...