Ways to display an image overlay on hover using sprite sheets

Is there a way to make a line appear, around 10px in size, when hovering over an image at the bottom of that image?

I came across this effect on MTV's website within their "You would also like these" section below each post. They utilized css-background sprites to achieve this.

Despite multiple attempts, I have been struggling to recreate this hover effect successfully. Everything seems to be working except for the main line appearing upon hover. Here is my current code

CSS

.yel_strip{background-position:-280px -495px; width:165px; margin:-8px 0 0 0; height:5px; position:absolute; display:none; z-index:1;}

.yel_strip:hover{ background:url(http://mtv.in.com/images/sprite_v1.png) no-repeat;}

HTML

<div class="movieL  hover_thumb">
<div><a href=""><img width="165" height="93" alt="" src=""/></a>
<div class="yel_strip"></div>
</div> </div>

Any guidance or assistance with this issue would be greatly appreciated. Thank you!

htmlcsscss-sprites

Answer №1

Here is a functional fiddle that I created for you, eliminating any unnecessary markup in your HTML: http://jsfiddle.net/PJMPw/3/

Your HTML:

<a href="#" class="hoverable">
    <img src="http://placekitten.com/g/300/300" />
</a>

And CSS:

.hoverable {
    display: block;
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

.hoverable:hover:after {
    bottom: 0;
}

.hoverable:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: -10px;
    left: 0;
    background: -moz-linear-gradient(left,  rgba(46,170,232,1) 0%, rgba(255,235,137,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(46,170,232,1)), color-stop(100%,rgba(255,235,137,1)));
    background: -webkit-linear-gradient(left,  rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
    background: -o-linear-gradient(left,  rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
    background: -ms-linear-gradient(left,  rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
    background: linear-gradient(to right,  rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

Answer №2

This code snippet includes HTML and CSS instructions:

Customize the placeholder http://yoururl with your unique URL.

<div class="container">
    <a href="http://yoururl" id="internal_image"><span></span></a>
</div>

Adjust the following CSS rules by replacing http//yourimage with the address of your own image file:

.container {
    width: 165px;
    height: 93px;
    background: url('http//yourimage');
    position: relative;
}

#internal_image {
    display: blocK;
    width: 165px;
    height: 93px;
}

#internal_image:hover span {
    display: block;
    width: 165px;
    height: 5px;
    position: absolute;
    background: url(http://mtv.in.com/images/sprite_v1.png) no-repeat;
    background-position: -280px -495px;
    bottom: 0;
}

Check out this EXAMPLE on JSFiddle for reference:: http://jsfiddle.net/BmwCe/3/

Answer №3

If you're looking to add a little flair to your images on hover, one simple option is to set a border that appears when the image is hovered over.

For example:

HTML Markup:

<div class="image-wrapper">
    <img src="../assets/images/Sunset.jpg" />
</div>

CSS Styling:

.image-wrapper {
    display: inline-block;
    position: relative;
}

.image-wrapper img {
    width: 100px;
    height: 100px;
}

.image-wrapper img:hover {
    border: 2px solid blue;
}

If you prefer to use a background image instead of a border for the hover effect, you can achieve this with the following code:

<div class="image-wrapper">
    <img src="../assets/images/Sunset.jpg" />
    <div class="gradient-overlay"></div>
</div>

.image-wrapper {
    display: inline-block;
    position: relative;
}

.image-wrapper img {
    width: 100px;
    height: 100px;
}

.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    opacity: 0;
    transition: opacity 0.5s;
}

.image-wrapper:hover .gradient-overlay {
    opacity: 1;
}

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

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

Whenever I try to use the get method on an HTML form, the submitted data automatically appears in the URL. You can see what I mean here. Interestingly, when attempting to achieve the same result with JQuery and AJAX using the get method, the data doesn&apo ...

phpjavascriptjqueryhtmlajax

Setting up Geolocation

I have been utilizing an APM tool for my work. The tool currently requires a pop-up in order to capture the user's location. However, there is now a need to capture the user's location without the pop-up appearing. Is there a method or workaroun ...

javascripthtmlsqlgeolocationgoogle-visualization

Using React Material UI icon within an auto complete feature

https://i.stack.imgur.com/W3CmF.png I am struggling to incorporate the target icon into the autoComplete component. After reviewing the documentation, I have been unable to find a solution. In TextInput, a similar outcome can be achieved by implementing ...

javascriptcssreactjsmaterial-ui

The bootstrap 4 modal is not displaying the button as expected

I am currently working on an Angular 4 project and I am trying to implement a pop-up using Bootstrap 4. <div> <span class="text-center" id="span1">{{title}}</span> <button type="button" class="btn primary-btn" data-toggle="modal" data ...

csstwitter-bootstrapbootstrap-modalbootstrap-4

How can I trigger the execution of textarea HTML code with an onClick event using JavaScript?

When my fingers are lifted from the keyboard, some code will be automatically executed. I want to trigger this function when I click a button (onclick) instead of using onkeyup. <div id="result"></div> <textarea ...

javascripthtmlcss

Unable to center div container with margin set to auto

I'm struggling to center my container on the website. My goal is to have it centered and take up about 80% of the page so I can incorporate an image slider and text inside. Using margin: 0 auto doesn't seem to be achieving what I want. The backgr ...

jquerycsshtmlweb

Adjust the transparency of a separate image within a different container by hovering over another image container

Is my goal too complex to achieve? I am attempting to create a hover effect where the opacity of artwork1 and button1 changes simultaneously when hovered over. However, I am having trouble properly labeling my elements and getting them to interact as inten ...

javascriptjquerycsshover

Guidelines on retrieving an HTML element from a source document

To change a specific HTML section identified by a tag id in source code consisting of both HTML and PHP, I need to use PHP. If the code is purely HTML, a DOM parser can be utilized; otherwise, if there are multiple nested DIVs, regex with preg_match might ...

phphtmlextract

What methods can I use to prevent columns from merging into a single column?

I am currently in the process of building a website using Bootstrap 3.1.1. The body tag is set with a min-width of 800px. The information that I want to showcase must be presented in a grid format, specifically resembling the layout of a parking lot. Dis ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Using Bootstrap 4 causes text to wrap buttons onto a separate line

I am facing an issue with my HTML page that displays correctly on medium and large devices but encounters difficulties on smaller screens. When the screen size decreases, the text inside the grey elements takes up all the space, causing the two right-float ...

htmlcssbootstrap-4

Revamped styling for responsive web design

I am relatively new to experimenting with Responsive Web Design for my website. I am struggling to align the class="label" correctly after checking it on various devices. Initially, I attempted this: https://i.sstatic.net/WiBXH.jpg Initially, everything ...

csstextresponsive-designstylingtext-alignment

The positioning of the text appears to be in the center, but it is actually

Currently, my text "lorum ipsum" is centered in CSS, but I want to align it to the left and add padding on the right later. Can someone explain what I've created here? #ubba { font-family: "Open Sans", sans-serif; font-size: 20px; ...

htmlcss

I am seeking guidance on retrieving the value of a text box that is activated by a radio button through jquery within the provided code

When conducting my test case, the user is presented with a choice between ielts and toefl. If the user chooses ielts, an input box appears where they can enter their ielts score. My goal is to extract and store the value entered in that input box. Check ou ...

javascriptjqueryhtml

Having an absolute element can lead to overflow causing a scroll

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .wrap { ...

htmlcsscss-positionoverflow

Mobile Iframe in Full View

Currently, I am working on a small project using Angular and Twitter Bootstrap. However, I have encountered a problem. I am trying to create a template that displays content in full screen upon clicking a button. The issue is that the iframe I am using wor ...

htmlangularjsiframemobile

Pause the event listener temporarily and reattach it after specific actions have been completed

I am currently working on a React app that includes a scrollable div. Here is an example: <main id="main" onScroll={this.handleScroll}> My question is, how can I temporarily remove the onScroll event listener from the main element and then reattach ...

javascriptjquerycssreactjs

What is the best way to incorporate a Bootstrap spinner icon in the center of a webpage's background?

Every time my HTML page reloads, I want to display a background loader icon. Although I have tried using the Bootstrap spinner icon, I'm facing difficulties in positioning it at the center of the page. <html> <style> .overlay { back ...

htmlcss

What is the Best Way to Send JavaScript Variables to MYSQL Database with PHP?

I am having trouble sending my variable to a MySQL database. The database only displays the variable when using the HTML input tag. The error message I received was "Undefined index: rate & amount." Seeking assistance to resolve this issue. Thank you! ...

javascriptphphtmlmysql

Show the layout of the table in a visual format

I am struggling to showcase a table created using <ul> tags. I want the content to be displayed one after the other. Here is my code: CSS .activity-list-header > li { display: inline-block; text-align: left; width: 15.666%; list- ...

jqueryhtmlangularjscss

Begin an unnumbered hierarchical list commencing at 1.2.1

I am trying to create a nested unordered list with specific numbering. My goal is for the list to start at "1.2.1, 1.2.2, etc." Please refer to the attached fiddle for reference. The desired outcome is shown in the following image: https://i.stack.imgur ...

htmlcss