Creating a responsive flexbox design that transitions smoothly between desktop and mobile view can greatly enhance the

I'm in the process of creating a website using the flexbox property. My goal is to have the color of the boxes change when a user hovers over them, and I want the boxes to adjust accordingly on mobile devices.

Below is my code snippet:

HTML:

<div id="site-features" class="features-box">
 <a href="#"><h3>My heading 3 - one</h3> <img src="/assets/img1.png" height="95px" alt="read out"></a>

 <a href="#"><h3>My heading 3 - two</h3> <img src="/assets/img2.png" height="95px" alt="read out"></a>

 <a href="#"><h3>My heading 3 - three</h3> <img src="/assets/img3.png" height="95px" alt="read out"></a>

 <a href="#"><h3>My heading 3 - four</h3> <img src="/assets/img4.png" height="95px" alt="read out"></a>

<a href="#"><h3>My heading 3 - five</h3> <img src="/assets/img5.png" height="95px" alt="read out"></a>
</div>

CSS:

.features-box {
    margin: 30px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1560px;
    height: 380px;
    background-color: rgb(6, 67, 122);
    padding: 5px;
    /* this */
}

.features-box>a {
    text-decoration: none;
    flex: 1 1 auto;
    border: 5px rgb(255, 255, 255) solid;
    margin: 5px;
    width: 500px;
    background-color: brown;
    height: 250px;
    position: relative;
    text-align: center;
    color: white;
}

.features-box>a:hover {
    color: green;
}

The issue I'm facing is that when hovered over, the effect only applies to the text rather than the entire box itself. How can I remedy this situation so that the hover effect covers the entire box rather than just the text within it?

htmlcssflexbox

Answer №1

Here is a way you can achieve it -

.features-box {
  margin: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgb(6, 67, 122);
  padding: 5px;
  /* this */
}

.features-box>a {
  text-decoration: none;
  flex: 1 1 auto;
  border: 5px rgb(255, 255, 255) solid;
  margin: 5px;
  width: 200px;
  background-color: brown;
  height: 250px;
  position: relative;
  text-align: center;
  color: white;
}

.features-box>a:hover {
  color: green;
  background-color: yellow ;
}
<div id="site-features" class="features-box">
  <a href="#">
    <h3>My heading 3 - one</h3> <img src="/assets/img1.png" height="95px" alt="read out"></a>

  <a href="#">
    <h3>My heading 3 - two</h3> <img src="/assets/img2.png" height="95px" alt="read out"></a>

  <a href="#">
    <h3>My heading 3 - three</h3> <img src="/assets/img3.png" height="95px" alt="read out"></a>

  <a href="#">
    <h3>My heading 3 - four</h3> <img src="/assets/img4.png" height="95px" alt="read out"></a>

  <a href="#">
    <h3>My heading 3 - five</h3> <img src="/assets/img5.png" height="95px" alt="read out"></a>
</div>

To enhance the styling of the cards, I've included background-color:yellow in the CSS to change the card's background color as well as the text color. Additionally, I have removed the fixed width on the flexbox and made it wrap to ensure flexibility in layout responsiveness across various screen sizes.

Answer №2

As a Python enthusiast,

if you want to modify the color of the box, make sure to specify the background property (color refers to the text).

.features-box>a:hover {
  background: green;
  color: white;
}

Answer №3

    color: green;
    background-color:
}

To optimize for mobile view You previously set a fixed width for your .features-box class To adjust for that, you can use

.features-box{
width:100%;
Flex-wrap:wrap;
}

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

Transformation in input value does not manifest in other components

When adjusting the sliders, the input fields are supposed to update accordingly. However, I've noticed that the changes in the input fields only take effect if I manually change their values. The automatic reflection doesn't seem to occur when us ...

javascripthtmljquerycss

Tips for increasing the size of the SVG icon within Material UI iconButtons

Have you experimented with creating webpages using react.js along with the Material UI library? How can I adjust the size of an SVG icon? Recently, I developed a "create new" component, which consists of a material paper element with an add button on top. ...

csssvgreactjsmaterial-designmaterial-ui

Checkbox and radio buttons in JQuery UI are stacked vertically on top of each other, rather than adjacent to each other

Here is the HTML code snippet: <div id="container"> <div id="signals-summary-parameters-radio"> <fieldset> <legend>Row Filter : </legend> <label for="signals-summary-radio-all">All</label> ...

jqueryhtmlcssjquery-uiradio-button

Is there a way to listen for the validation of an HTML5 form before it is submitted?

I've been trying to figure out a way to detect if a form has been validated, but so far, no luck. For example: User clicks the submit button The form is invalid, so the submit event doesn't occur At this point, I want to add the class .form-fe ...

javascriptjqueryhtml

Issue with div:after transition not functioning in Safari

The transition effect on div:after does not function properly in Safari. Below is the code for reference: HTML: .bbtn { width: 151px; height: 48px; background: #ef2e41; margin: auto; margin-top: 32px; -webkit-transition: all 0.3s ease-in-ou ...

htmlcss

Creating a Full Height Background Image with a Responsive Width Using Jquery

I am facing an issue with my background image dimensions of 1400 in height and 1000 in width. When using any full-screen background jQuery plugin or code, the image crops from either the top or bottom to fit the entire screen. However, I am looking for a s ...

javascriptjqueryhtmlcss

Improved method for managing hash URLs in AJAX-enabled websites

When dealing with pages that have a hash mark in the URL address bar, it can be inconvenient unless using HTML 5 and history.pushState() for AJAX loads. For example, when item1.html is loaded and then the user clicks to view item2.html, the URL changes to ...

javascriptajaxhtmlback-buttonhistory.js

Search Result Causing Navbar to Break in Bootstrap Framework

While working on implementing the search functionality with AJAX and PHP, I encountered an issue where displaying the search results breaks the navbar layout. https://i.sstatic.net/FctpA.png this is the navigation bar code <nav class="navbar ...

phphtmlcssajaxtwitter-bootstrap

Upon successful saving, the values stored in Ionic Storage remain unchanged and do not automatically update in Capacitor/Ionic 6

Utilizing the Ionic storage plugin, I am able to store and retrieve values in my app. The settings page allows users to make selections that impact the overall app experience. This is the code snippet from my settings.page.html <ion-header> <io ...

javascriptandroidhtmltypescriptionic-framework

submitting two contact forms using ajax

Looking to enhance my knowledge of form design... Hello there! I'm currently working with two contact forms on the same page, both utilizing ajax for submissions. Each form functions properly when standalone, but as soon as I integrate them togethe ...

phpjqueryhtmlajaxforms

Securely loading content into a div tag to prevent any potential hacking attempts

My code structure is as follows: <div id="content-wrapper"> <div id="content"> Main content here </div> </div> On the same page, I also have: <div id="footer-wrapper"> <div id="footer ...

html

How to position a div in the center of the screen with an overlay

While this code functions well in Firefox, it unfortunately does not work in IE. I am seeking a solution to properly center the div on the screen - Currently, the div is leaning too much towards the bottom In addition, I require the div with an id of "l ...

javascriptjquerycssinternet-explorer

Attempting to add custom styling to the parent container of a specific element targeted using the :target selector in plain HTML and CSS

I have a document with internal links to subheaders from various categories. My goal is to selectively hide category content based on the specific #target selected. <html> <style> .tab-folder > .tab-content { display: none; } ...

htmlcss

Initiate a CSS animation within an iframe once the iframe becomes visible on the screen

Currently, I am working on creating HTML5 banner ads for Google AdWords using CSS animations. One challenge I have encountered is that due to the time restrictions of 30 seconds for animations in each ad, users may not always see all stages of the animatio ...

cssanimationiframeviewportgoogle-ads-api

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...

phpjavascripthtml

When a DOM object is passed in JavaScript, its value becomes indeterminate

I am currently working on creating a table that can change its background color based on an RGB value. Each row in this table contains clickable <td> cells that contribute to the RGB value. For example, the first row might be +/- 123, the second row ...

javascripthtmldom

Extracting text from HTML tags can be quite tricky, especially when you need the text within a specific tag like <td> but not within any nested tags like <

Is there a way to extract only the numbers from the <td> tag and ignore any text within the <strong> tag that is nested inside it? I am currently using selenium code but it returns the entire content of the <td> tag. Python Code: wait. ...

pythonhtmlseleniumweb-scrapingcss-selectors

Enhance user experience with AngularJS Bootstrap autocomplete feature by automatically filling input box when hovering over dropdown options

I am currently implementing the AngularJs Bootstrap typeahead functionality. Typically, when we enter text that matches an option, the dropdown list appears. https://i.stack.imgur.com/395Ec.png What I aim for is to automatically fill the textbox with the ...

javascriptcssangularjsangular-ui-bootstrap

Clicking on a button within the parent element will enable you to remove the parent element multiple times with the use of VanillaJS

Within a ul element, each li contains multiple elements in the following structure: <ul> <li> <div> <p>some text </p> <button>delete</button> <div> </li> <li> ...

javascripthtml

Positioning a sticky footer in a dual-column design

This updated post is a revised version of the one found at this link. I aim to provide a clearer explanation of my issue compared to the previous post. The problem revolves around the placement of the footer in two different scenarios. Scenario 1: https: ...

htmlcss