How should one correctly align various classes in a cascading manner within CSS?

Here is an interesting challenge - I want each of these buttons to have their background image change when hovered over. However, I'm struggling with the class setup in my code. I've been trying to understand how to distinguish between divs and classes, but the information I found is confusing and messy in my mind. I believe my code is far from ideal.

Take a look at my HTML:

<div class="option graphic">
GRAPHIC DESIGN
</div>

<div class = "option product">
PRODUCT DESIGN
</div>

<div class = "option web">
WEB DESIGN
</div>

<div class = "option design">
APP DESIGN
</div>

And here is my CSS:

.option{
    color: #FFFFFF;
    line-height: 100px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    width: 813px;
    height: 100px;
    background-color: #383838;
    cursor: pointer;
    cursor: hand;
}

.option.graphic{
    background-image: "graphicdesign_1.png";
}
.option.graphic:hover{
    background-image: "graphicdesign_2.png";
}

I'm struggling to figure out the correct formatting for these classes in HTML and CSS. What I have now is not producing the desired result. Any tips or links to helpful articles would be greatly appreciated.

Thank you in advance.

Answer №1

modify

background-image: "graphicdesign_1.png";

to

background-image: url("graphicdesign_1.png");

for both pictures

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

Unable to reach the top of an absolute or centered div when it exceeds the height of the viewport

I have successfully created a centered div with position: absolute/top: 50%/left: 50%/transform: translate(-50%, -50%) css properties on my website. However, I am facing an issue where the height of the div exceeds the viewport height and scrolling to the ...

Obtaining a CHUNKY h1

After years of designing websites, one thing that continues to puzzle me is how people achieve that bold and THICK h1 effect. Take a look at this example - https://i.sstatic.net/xOJHn.png Even with a font weight of 700, it always seems too thin no matter ...

div within a fixed width container with 100% width inside

Is there a way to ensure that div B has a width of 100% when nested inside Div A, which already has a fixed width? .divA{width:600px; margin:0 auto;} .divB{width:100%; height:20px; background-color:black} .filler{height:800px; background-color:grey} ...

What is the best way to maintain the highlighting of a clicked navigation button in CSS?

.custom-highlight { display: inline; font-weight: 500; font-size: 15px; } .item-list { border: 1px solid #b1b8c9; color: $color-grey-light; font-size: 14px; display: inline-block; margin-right: 8px; padding: 5px 20px; border-radius: 4p ...

I am having trouble getting the color, metalness, lights, and shaders to work properly in Three JS on my

I attempted to create a simple code using Three.js for a red colored torus with a point light and a textured surface, but unfortunately, all I achieved was a black torus that rotates. It seems like the elements in this code are not functioning as expecte ...

Permanent Solution for HTML Textbox Value Modification

https://i.sstatic.net/nB58K.pngI'm currently working on a GPS project where I am attempting to capture the altitude (above sea level) value in textbox1 and convert it into a ground level value displayed in textbox2. In this scenario, the GPS Altitude ...

Can we incorporate the radix-ui/colors variables into a CSS module file?

For my personal project, I am incorporating Radix components alongside radix-ui/colors. However, when attempting to import color variables into the CSS Module, I encountered an error. It seems that using the :root selector in the _app file is necessary, as ...

The connection of <p:ajax> to a parent component that is not a ClientBehaviorHolder is not possible

Trying to trigger a function when selecting a value from a dropdown. See the code below: <h:form id="frmUpload" enctype="multipart/form-data"> <p:column><h:outputText value="Select Team: " /></p:column> <p:colu ...

Troubleshooting: Unable to Display Collapsing Navbar in Bootstrap 5 When Toggler is Pressed

My attempt at creating a collapsing navbar isn't working as expected, and I'm struggling to identify the issue. I have set up a collapse toggler that should target #navbar1. However, when I shrink the page, the Navbar collapses, the .navbar-togg ...

Attempting to create a login and registration form

Hello, I am attempting to create a form that can generate new user accounts and passwords. These values should be stored from the input tag when the user clicks on the register button. Unfortunately, I am encountering an issue where clicking the register ...

The mobile website layout appears immaculate on the emulator, but it doesn't translate well on real mobile devices

Recently, I delved into the world of html/css/javascript and decided to create a website as a way to practice my skills. However, I have come to realize that many of the methods I used are not considered best practices. I am committed to improving and will ...

Customizing the CSS shadow for a specific ionic select text color, while ensuring that other ion select instances remain unaffected

I'm encountering an issue while attempting to customize the text color inside an ion select element based on the option selected. Unfortunately, when I make changes to the shadow part in one component, it affects other components as well. I want to ap ...

The Infinite Loop: Unveiling the En

I'm interested in creating a unique shape resembling the symbol of infinity using CSS, SVG, or Canvas. If you're unfamiliar with what an infinity symbol looks like, here's an example: https://i.stack.imgur.com/cLhBh.jpg So far, I've a ...

Eliminating the issue of double scroll bars that overlap each other

Currently, I am developing a website that utilizes javascript, html, and css. One of the pages on the site displays all users as list items within an unordered list, which is nested inside two separate div elements. When accessing the page on my phone, bot ...

Setting table row styles for odd and even rows, based on user clicks of an <input type="file"> button

I'm currently working on a feature that allows users to upload files to a page using an button. Each file is displayed in a table as a new row. I am looking for a way to set the background color differently for odd and even rows. As of now, I am usin ...

SEO tip: concealing lightbox images from search engines

Our website primarily uses lightboxes loaded via Ajax for images, meaning search engines may not index them when crawling the page. Is there a way to enhance SEO for these lightbox images? Thanks for your help! ...

tips on sending multiple data- id in a modal window

Let's say I have multiple order IDs $order_id='12345566778'; $prod_id='126778899'; $sell_id='373462562363'; When I select a particular order ID, I want to pass it to a PHP variable located in the modal body of a popup. ...

Is there a way to adjust the size of a video thumbnail to fit within a

Currently, I am developing a system to remotely control home electrical devices via the web. However, I am facing an issue with fitting camera images properly within their container. https://i.sstatic.net/Yct2d.png How can I ensure that the video thumbna ...

Encountering a challenge when trying to showcase data from a saved .txt file within a bootstrap card

I encountered a minor problem in my PHP project. I developed a small application that allows users to fill out form fields and stores all the data in a .txt file. Simultaneously, the entered data is displayed below the form with specific details such as fi ...

Several levels piled one on top of the other

I'm in the process of designing a section for a webpage using Bootstrap 3.0, and I want to layer three divs or sections on top of each other. The stacking order should be as follows: background "squares," footer, and foreground "squares" with images. ...