我目前正试图找到一种方法来制作它，以便将鼠标悬停在我网站首页上的每个单独的框（http://thefloodplains.com/）上时，会为该特定框子生成阴影动画。我希望它看起来与此页面上的内容非常相似：http://tobiasahlin.com/blog/how-to-animate-box-shadow/。我已尝试使用此页面作为尝试设置悬停阴影效果的指南。
这里是专门针对我网页上的div框的CSS / HTML（http://thefloodplains.com/）：
.col-md-4 {
color:#00A5D1;
height:300px;
}
.col-md-3 {
color:#00A5D1;
height:300px;
box-shadow: 2 2px 3px rgba(0, 0, 0.1, 0.1);
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.col-md-4:hover {
background-color: #FFE097;
}
.col-md-3:hover {
-webkit-transform: scale(1.25, 1.25);
transform: scale(1.25, 1.25);
}
.col-md-4 h3 {
position: relative;
top: 40%;
transform: translateY(-50%);
}
.col-md-4 {
color:#00A5D1;
height:300px;
border: 1px solid #FF8B6F;
position: relative;
}
.col-md-3 {
height:300px;
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-3:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
left: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.col-md-4:hover:after {
opacity: .5;
}
.col-md-3:hover:after {
opacity: 1;
}
.col-md-4 h3 {
position: relative;
z-index: 1;
top: 40%;
transform: translateY(-50%);
}
任何课程＆＃34; .col-md-3＆＃34;是我试图添加悬停阴影效果的地方（就像我已经设置了当前的悬停颜色效果一样）。以下代码是我的首页的其余CSS / 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('AboutIcon.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div2 {
background-image: url('ArticlesIcon.png');
background-position: center center; //center the image in the div
background-size: contain; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div3 {
background-image: url('CodingBrackets2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div4 {
background-image: url('ContactIcon.png');
background-position: center center; //center the image in the div
background-size: contain; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div5 {
background-image: url('FSMusicArt.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div6 {
background-image: url('AudioProduction4.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div7 {
background-image: url('Violin3.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div8 {
background-image: url('GalleryImage2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div9 {
background-image: url('Handshake2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
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" id='div1'>
<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="CodingCorner.html" title="Coding Corner - Code for a Variety of Projects"><div class="col-md-4" id="div3">
<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="TheFloodSharkMain.html" title="The FloodShark Music and Media"><div class="col-md-4" id="div5">
<h3>
The FloodShark
Music
</h3>
</div></a>
<a href="FloodplainProductions.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="ClassicalCorner.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.html" title="Contribute to The Floodplains!"><div class="col-md-4" id="div9">
<h3>Contribute / Support</h3>
</div></a>
</div>
</div>
</body>
我尝试添加＆＃34; col-md-3＆＃34;将div作为上述代码中的第二类以及＆＃34; col-md-4，＆＃34;它控制颜色悬停效果。问题是，我不认为这种方法有效，但我不确定是什么。截至目前，我正在使用＆＃34; col-md-4＆＃34;颜色悬停效果 - 这是有效的 - 但是让阴影效果同时工作是我还没有想到的。
所以目前 - 在悬停时 - 盒子变成橙色/黄色的透明色调。有没有办法可以让阴影动画和颜色变化盘旋在一起同时工作？所以基本上我只需要添加一个悬停动画添加到http://thefloodplains.com/已经存在的内容。
提前感谢您的时间。
答案 0 :(得分：2)
为效果创建一个新类，即 hovernow 添加以下代码：
body {
background-color: white;
}
.hovernow {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s ease-in-out;
}
.hovernow:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}<div class="hovernow">
</div>
然后将此课程.hovernow添加到您希望应用悬停效果的div中。
答案 1 :(得分：1)
您是否在寻找这个，Fiddle
我添加了.col-md-4的样式。请检查代码......