Добавить эффект тени при наведении на DIV-боксы - PullRequest
Новая
       25

Добавить эффект тени при наведении на DIV-боксы

0 голосов
/ 08 июня 2018

В настоящее время я пытаюсь найти способ сделать так, чтобы при наведении указателя мыши на каждый отдельный блок на главной странице моего сайта (http://thefloodplains.com/), для этого конкретного блока возникала теневая анимация.выглядеть очень похоже на то, что можно найти на этой странице: http://tobiasahlin.com/blog/how-to-animate-box-shadow/. Я использовал эту страницу в качестве руководства в попытке настроить эффект наведения тени.

Вот CSS / HTMLспециально для блоков div на моей веб-странице (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%);
}

Все, что связано с классом ".col-md-3", - это то, где я пытался добавить эффекты парящей тени (во многихтак же, как у меня уже настроены текущие эффекты наведения цвета. Следующий код - это остальная часть 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>

Я попытался добавить "col-md-3 "в качестве второго класса в приведенном выше коде вместе с" col-md-4 ", который управляет эффектом наведения цвета. Проблема в том, что я не думаю, что этот метод работает, но я не совсем уверенЧто делает. На данный момент, я использую "col-md-4" Color Hover Effect - который работает - но заставить работать эффект тени одновременно - это то, что мне еще предстоит выяснить.

Так что в настоящее время - при наведении - коробки превращаются в этот прозрачный оранжевый / желтый оттенок.Есть ли способ, с помощью которого я могу заставить анимацию теней и зависания смены цвета работать одновременно?Поэтому в основном мне нужно добавить анимацию при наведении на то, что уже здесь, в http://thefloodplains.com/.

Заранее спасибо за ваше время.

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Вы ищете это, Fiddle

Я добавил стиль для .col-md-4.Пожалуйста, проверьте код ...

0 голосов
/ 08 июня 2018

Создайте новый класс для эффекта, например 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, к которым вы хотите применить эффект hover .

...