Способ отправить аффект наведения поверх <div>?
Я пытаюсь найти способ получить эффект наведения, который у меня есть на домашней странице моего веб-сайта, для размещения поверх фоновых изображений, которые я установил для каждого из интерактивных блоков страницы.
Таким образом, в основном, цветовые эффекты наведения должны влиять на фоновые изображения, что не является текущим случаем. Как видно из блоков 1 и 3, каждый раз, когда вы наводите курсор мыши, цвет меняется. Я хотел бы, чтобы это было верно для всех коробок, которые также имеют изображения. Как я понял, я не могу придумать, как вывести эффект наведения на вершину стека.
В основном, из кода, размещенного ниже, я думаю, что мне нужно
.col-md-4:hover{
background-color: #FFE097;
}
чтобы заменить это для ящиков, которые я установил на главной странице.
Вот мой основной CSS:
.col-md-4 {
color:#00A5D1;
height:300px;
border: 1px solid #FF8B6F;
}
.col-md-4:hover{
background-color: #FFE097;
}
.col-md-4 h3 {
position: relative;
top: 40%;
transform: translateY(-50%);
}
/* Basic Structure
-------------------------------------------------------------- */
h3 {
font-size:14px;
text-align:center;
font-family: 'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
}
И вот HTML-код для моей домашней страницы:
<style>
h3 {
font-size:36px;
font-style: bold;
text-align:center;
font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
}
img {
max-width: 100%;
max-height: 100%;
}
#div1 {
background-image: url('');
max-width: 100%;
max-height: 100%;
background: url('bgimage.jpg') no-repeat;
background-size: 100%;
}
#div2 {
background-image: url('FeatherPen2.jpg');
background-position: center center; //center the image in the div
background-size: contain; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#div3 {
background-image: url('');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#div4 {
background-image: url('Birds%20on%20Wire.jpg');
background-position: center center; //center the image in the div
background-size: contain; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#div5 {
background-image: url('Shark Cans Logo.jpg');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#div6 {
background-image: url('Ocean%20Water2.jpg');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 110%;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#div7 {
background-image: url('Piano.jpg');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#div8 {
background-image: url('Gallery%20Image.JPG');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
max-width: 100%;
max-height: 100%;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#div9 {
background-image: url('Handshake.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 72%;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
div {
background-image:url(../images/please-dont-use-spaces.jpg); //add the background image
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<a href="About.html" title="About the site and Author"><div class="col-md-4">
<h3>About</h3>
</div></a>
<a href="Articles.html" title="Original Articles and Content"><div class="col-md-4" id='div2'>
<h3>Articles</h3>
</div>
<a href="Coding Corner.html" title="Coding Corner - Code for a Variety of Projects"><div class="col-md-4" id="">
<h3>Coding Corner</h3>
</div></a>
</div>
<div class="row">
<a href="Contact - Social.html" title="Contact The Floodplains & The FloodShark"><div class="col-md-4" id="div4">
<h3>Contact & Social</h3>
</div></a>
<a href="The FloodShark Main.html" title="The FloodShark Music and Media"><div class="col-md-4" id="div5">
<h3>
The FloodShark
Music
</h3>
</div></a>
<a href="Floodplain Productions.html" title="Floodplain Productions - virtual record label"><div class="col-md-4" id="div6">
<h3>Floodplain Productions</h3>
</div></a>
</div>
<div class="row">
<a href="Classical Corner.html" title="Classical Corner - A nook dedicated to sharing and categorizing classical music"><div class="col-md-4" id="div7">
<h3>Classical Corner</h3>
</div></a>
<a href="Gallery.html" title="Images, Photographs, and Album Art"><div class="col-md-4" id="div8">
<h3>Gallery</h3>
</div></a>
<a href="Contribute - Support - Donate.html" title="Contribute to The Floodplains!"><div class="col-md-4" id="div9">
<h3>Contribute / Support</h3>
</div></a>
</div>
</div>
</body>
</html>
Любой совет будет высоко ценится.
1 ответ
Вы можете создать оверлей, используя псевдоэлемент, сложенный поверх div,
Добавьте следующий CSS:
.col-md-4 {
...
position: relative;
}
.col-md-4:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.col-md-4:hover:after {
opacity: .5;
}
.col-md-4 h3 {
position: relative;
z-index: 1;
...
}