Rotating arrow graphics for banner images

I'm in the process of setting up a rotating image banner with "arrow" overlays for when one of the 5 banners is selected. I've created my divs but I'm not sure what my next steps should be. Should I format the Banner1-Banner5 descriptions as an UNORDERED LIST with LIST ITEMS and change the styles? Or should I keep them as separate div's like I have below? Additionally, I'm unsure of how to implement the "arrow" overlay when a specific banner description is chosen. See the image below for how the final banner should look. My framework code can also be found below.

    <!-- hp banner start -->
    <div id="hp-banner">

    <div id="hp-banner-left">
    BANNER IMAGE
    </div>

    <div id="banner-right">
    <div id="banner-right-1">
    BANNER 1 DESCRIPTION
    </div>

    <div id="banner-right-2">
    BANNER 2 DESCRIPTION
    </div>

    <div id="banner-right-3">
    BANNER 3 DESCRIPTION
    </div>

    <div id="banner-right-4">
    BANNER 4 DESCRIPTION
    </div>

    <div id="banner-right-5">
    BANNER 5 DESCRIPTION
    </div>


    </div>


    <!-- hp banner end -->
    </div>

jqueryhtmlcss

Answer №1

Although I share Billy Moat's perspective, I believe it is valuable to explore the full potential of CSS with some additional expertise.

The right-hand sidebar should clearly be presented as a list since that is its apparent structure.

I anticipate that the most challenging aspect of this project would be incorporating the arrow elements. However, achieving this effect using CSS is actually quite straightforward.

http://jsfiddle.net/Lddxooum/

HTML 

<ul>
    <li>banner 1</li>
    <li>banner 2</li>
    <li>banner 3</li>
    <li>banner 4</li>
    <li>banner 5</li>
</ul>

CSS

div {
    float:left;
    width:200px;
    height:100px;
    background:orange;
}

ul {
    float:left;
    margin:0;
    padding:0;
}

li {
    list-style:none;
    line-height:20px;
    background:gray;
    position:relative;
}

li:hover {
    color:white;
    background:blue;
}

li:hover:before {
    content:'';
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:20px solid blue;
    position:absolute;
    right:100%;
    top:0;
}

The final CSS block demonstrates how to create the arrow element. It showcases the versatility of HTML and CSS in generating various shapes and designs.

https://css-tricks.com/examples/ShapesOfCSS/#triangle-up

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

Adjust the parent's height to match the height of its content (CSS)

Could anyone assist me in figuring out how to adjust the height (red border) to fit the content (green border)? https://i.sstatic.net/l1p9q.png I'm struggling to determine which property to use, I'm aiming for this outcome but haven't had ...

htmlcss

Utilizing Google Maps to generate outcomes for an online platform

My approach with Google Maps is a bit unconventional. Instead of rendering images, I aim to execute JavaScript code that processes data and returns a text response. However, I soon realized that running JavaScript as a remote web service might not be pos ...

phpjavascripthtmlweb-servicesgoogle-maps-api-3

Share the URL from various <select> elements

Currently, my page features an isotope filter that utilizes combination filters with hash history. Whenever multiple filters are selected, the URL is updated accordingly: example.com/portfolio/#.filter1&.filter4&.filter6 In addition to this, ther ...

javascriptphpjqueryjquery-isotope

When resizing the browser window, this single horizontal page website does not re-center

I am in the process of creating my very first one-page horizontal website using jQuery and the scrollTo plugin. This site consists of 3 screens and initially starts in the center (displaying the middle screen). To achieve this, I decided to set the width o ...

jqueryhtmlcssresize

Adjust font size proportions in CSS3

I am currently experimenting with the new font-face feature in CSS3 to use custom TTF/OTF fonts. My question is: can I adjust the default font size ratio? For example, if I am using Tahoma with a default 9pt font size and want to switch to my own custom ...

css

Struggling to create a flawless gradient fade transition

Looking to create a gradient overlay on my images for a specific effect: The goal is to have the gradient darker at the bottom, while leaving the top unaffected by the darkness. I attempted the following code: @include linear-gradient(to top, rgba(0,0,0 ...

csslinear-gradients

Tips for executing both onclick events and a href links simultaneously

boilerPlate.activityStream = "<div class='socvid-aspect-ratio-container'>"+ "<div onclick='com.ivb.module.home.pics.showDialogBox(\"{%=nodeId%}\",\"{%=class ...

javajavascriptjqueryhtml

What is the best way to apply custom styles in reactJs to toggle the visibility of Google Maps?

There are three radio buttons that correspond to school, restaurant, and store. Clicking on each button should display nearby locations of the selected type. Displaying Google Map and nearby places individually works fine without any issues. class Propert ...

javascriptcssgoogle-mapsreactjsgoogle-maps-markers

Erase a set of characters with the press of the backspace key (JavaScript)

Within my textarea, I have lines that start with a number and a period: <textarea autoFocus id="text-area"wrap="hard" defaultValue ={this.state.textAreaVal} onKeyUp={this._editTextArea}/> For example: Line 1 Line 2 Line 3 I've created a ...

javascripthtmlreactjs

Updating the color of tick marks on checkboxes

I have successfully updated the background color of my checkboxes using a custom function. However, the tick mark on the checkbox now turns black instead of remaining white. How can I keep the tick mark white while changing the background color? Here is t ...

javascriptcssvue.js

Incorporating sliding animation into Angular's ng-repeat directive

I am currently working on my code to create multiple divs with a hide button in each one. When the hide button is clicked, I want the corresponding div to fade away and the divs below it to smoothly move up to fill the space left behind. Below is the snip ...

javascriptcssangularjsanimationangularjs-ng-repeat

Error in JSON data structure while transferring data from Jquery to PHP

Having some trouble with my first attempt at sending a JQuery request to an API I'm developing. My PHP code keeps reporting that the JSON is malformed. Interestingly, if I create a JSON array in PHP and send it through, everything works perfectly. Bu ...

javascriptphpjqueryjsonajax

The element is anchored within a div, but its position is dependent on a JavaScript script

I am dealing with a situation where I have a div named "Main_Card" containing text and an icon. When the icon is clicked, it moves the "Main_Card" along with everything inside of it. The challenge arises when I need to set the icon's position as eithe ...

javascriptjqueryhtmlcss

Sending an array of information from a web form, through an AJAX request, and finally to a PHP file

Just a quick question: I have a form with 54 input fields that are auto-populated with data from a database. Each input field has an ID assigned using a PHP while loop. After the user edits the values and clicks submit, the data is passed to an array in jQ ...

javascriptphpjqueryajaxmysqli

Determining the optimal line break position in HTML text for a dynamic design

Is there a special CSS or Javascript trick that can be used to mark the preferred line break locations in HTML text when it becomes crowded? I am looking for a solution to optimize line breaks in cramped text areas. Any suggestions? ...

htmlcssresponsive-designline-breaks

What is the method for placing a badge above a Font Awesome icon?

Is it possible to add a badge with numbers like 5, 10, or 100 on top of the Font Awesome symbol (fa-envelope)? I am looking for something like this: However, I am struggling to figure out how to place the badge on top of the symbol. You can see my attempt ...

cssfont-awesomebadge

Is it possible to use jQuery sortable and serialize to save data into a

I've nearly completed this project, but I'm stuck on extracting values from the database and properly displaying them within the <li></li> tags in the right order with the correct links. Here's what I have so far: HTML < ...

phpjqueryarrays

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

I am encountering an issue with dynamically loading stylesheets via JavaScript into my application. Within these stylesheets, I have various CSS variables that I need to access and modify from my JavaScript code. When the stylesheets are directly embedded ...

javascripthtmlcsscss-variables

Disabling the ability to edit the rightmost portion of an input number field

I am looking for something similar to this: https://i.stack.imgur.com/ZMoNf.jpg In this case, the % sign will be shown in the input field by default and cannot be changed or removed. The user is only able to modify the number to the left of the % sign. P ...

javascriptjquerycsshtml

Using Styled Components to achieve full width for input tag in relation to its parent

I am working with an input field that has a specific width set. My goal is to increase the width of this input field to 100% by selecting it from its parent component. Is there a way to achieve this without passing an explicit width prop in the styled c ...

javascripthtmlcssreactjsstyled-components