Enhance your DIV boxes with a stylish shadow effect when hovering over them

I am in the process of exploring a method to create a shadow animation when each box on the homepage of my website () is hovered over. I envision the animation to be similar to what is demonstrated on this page: . I have referred to this page as a guide to implement a hover shadow effect.

Below is the specific CSS/HTML for the div boxes on my website ():

.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%);
}

I have tried incorporating the hover-shadow effects by adding "col-md-3" class to the divs along with "col-md-4" which controls the color hover effect. However, I have not been successful with this method. I am unsure about the correct approach. Currently, the color of the boxes changes to a transparent orange/yellow shade upon hovering. Is there a way to achieve both the shadow animation and color change hover effects simultaneously? Essentially, I need to add a hover animation to what is already implemented on .

Thank you for your assistance.

Answer №1

To implement a hover effect, start by creating a new class named hovernow and include the following code:

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>

After defining the class .hovernow, apply this class to the div elements where you want the hover effect to take place.

Answer №2

If you're seeking it, here is the Fiddle

The style for .col-md-4 has been included. Don't forget to review the code...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extracting information from a table containing both obscured and accessible rows

Currently, I am attempting to scrape data from this specific website by utilizing Selenium. While my code successfully loads the desired table, I encounter challenges when trying to extract data from hidden rows, even though the information is visibly pres ...

Scaling images using jQuery for enhanced visual appeal

I implemented a jQuery hover effect on my image gallery where the images have a default size of 265 x 172 and are displayed horizontally. My goal is to have the images swap out for larger ones sized at 449 x 223 when a user hovers over them. However, I wan ...

Pixelated Arial font display issue on WordPress

After learning about how Chrome renders fonts and the differences among other browsers, I encountered an interesting scenario. I have two files: one is a WordPress page where the font in the header appears pixelated, and the other is a static HTML page wit ...

Leveraging CSS attribute selectors within JSX using TypeScript

With pure HTML/CSS, I can achieve the following: <div color="red"> red </div> <div color="yellow"> yellow </div> div[color="red"] { color: red; } div[color="yellow"] { color: yellow; ...

Place an element in relation to its initial position, ensuring that the x-coordinate is not set to 0

Is there a method to place an element in relation to its initial position, only excluding x=0 - meaning that the element is placed at its original vertical coordinate but sticks to the window's left edge? ...

Ways to create a group label to modify various textboxes when a click event occurs

Is it possible to change multiple textboxes with corresponding labels after a click event? Issue: The current output only displays the value of the last textbox. $(function () { $('a.edit').on('click', function (e) { e.pre ...

The layout of an HTML and CSS page does not adjust according to the size of the

Having trouble scaling down my HTML and CSS code properly using only %'s and vw's. The entree div and drink div are dynamically populated, making formatting even more challenging. <!DOCTYPE HTML> <html> <link rel="stylesheet" h ...

How to change the background color of a slider using jQuery

As a newcomer to web programming, I am currently working on incorporating a slider into my website using jQuery. My goal is to change the background color of the slider to red when the value is less than 5 and green when it exceeds 5. Can this be achieved ...

Can Bootstrap CSS take precedence over a theme's styling?

After working with various WordPress theme templates, I am now ready to take on the challenge of creating my own custom themes. One aspect I would like to incorporate is utilizing Bootstrap to ensure my website is responsive. However, I have some questions ...

Can the presence of buttons and links improve mobile responsiveness?

I can't help but wonder about this. Is it user-friendly to create a div that looks like a button and has a 'click' event attached to it? Will all mobile browsers handle it accurately and always trigger the event when the div is clicked? In t ...

React Semantic UI - A modern solution for semantic web development

Having trouble styling React Components with Semantic UI for React (). I've customized Semantic UI's styles Core, but sometimes I need to incorporate my own styles into their components. I prefer using the BEM methodology for CSS naming conventi ...

Implementing Fullpage.js with persistent elements throughout slides

Can I keep certain elements fixed between slides? I found that the only way to accomplish this was by placing the text element outside of the slide div. <div class="section" id="section1"> <div class="intro"> <h1> ...

``What is the best way to adjust the layout of

I've been using the CSS code below to center items on my page: #MainBox { width: 488px; height: 181px; position: absolute; left: 50%; top: 236px; margin-left: -244px; //this being half the width } However, when viewing the pag ...

Designing a custom CSS for enhancing the look of the orchard menu

Right now, I am in the process of implementing a layout that is already established in an MVC4 project. I am facing challenges in figuring out how to create a custom menu in the latest version of Orchard (using the source version so it runs in Visual Stud ...

What is the best way to automatically create a line break once the User Input reaches the end of a Textbox?

I've been searching for a solution to this question without any luck. Here is the tag I'm working with: <input type="text" id="userText" class="userTextBox"> And here is my CSS: .userTextBox { /* Add marg ...

Is there a way to pass locale data using props in VueJS Router?

To access hotel data, the URL path should be localhost:8080/hotel/:id (where id is equal to json.hoteID). For example, localhost:8080/hotel/101 This path should display the specific data for that hotel. In order to achieve this, we will utilize VueJS vu ...

How can I verify the content within a span element?

Here is the HTML code snippet I am working with: <span id="gruszka1">1</span> I have already figured out how to check if the specific span exists: if($('span#gruszka1').length){ //do something }); Now I want to determine if the te ...

Unable to make a request to the localhost node server via fetch API from an HTML page

Description: I am attempting to transmit JSON data from an HTML page to a Node.js server running locally on port 5000 using the Fetch API. Error Encountered: The request to 'http://localhost:5000/attend' from origin 'http://127.0.0.1:5501 ...

When using TypeScript in React, the event handler for the onLoad event of an image element cannot locate the properties naturalWidth and naturalHeight

https://i.sstatic.net/vPfkL.png return <img {...props} onLoad={event => { console.log(event.target.naturalWidth) }}/> I am encountering an issue trying to access naturalWidth and naturalHeight in TypeScript React. Unfortunately, TypeScript is ...

What is the reason behind receiving a CSS warning stating "Expected color but found '0' " when using Phaser's setText() function?

Here's how I created my text object: statusBarHP.text = game.add.text(0, 0, '', { font:"16px Arial", fill:"#ffffff", stroke:"#000000", strokeThickness:2 }); For the object that holds the text: statusBarHP = game.add.sprite ...