Creating captivating visual effects with Jquery color overlays on images

Trying to figure out how to create a hover effect on images that darkens them using Bootstrap.

However, I want the effect to be contained within the white padding of the image and not cover the entire area including the white border.

I've been struggling with getting the positioning right. Whenever I try to adjust heights and percentages, the hover effects end up extending beyond the image when the screen width changes.

Can someone offer any assistance with this challenge?

Here is the code snippet for reference:

jquerycsstwitter-bootstrap-3jquery-hover

Answer №1

The method I discovered to achieve this is as follows: Modify the .caption width and height, then proceed to center the entire element.

CSS:

.caption {
    position:absolute;
    top:2%;
    background:rgba(66, 139, 202, 0.75);
    width:97%;
    height:96%;
    padding:2%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}

Note: Upon closer inspection, it is not flawless due to using % for fixed width and height. However, this should suffice for the task at hand.

Answer №2

BOOTSTRAP PLAYGROUND

To ensure consistent styling for your thumbnails, adjust the padding in your .caption class from percentage values to pixel values. This will simplify the sizing calculations and allow you to offset the element top, right, bottom, left by the same amount for a uniform white border around each thumbnail. Remember to compensate for the border by adjusting all sides with -1px.

.caption {
    position:absolute;
    top:4px;
    left:4px;
    right:4px;
    bottom:4px;
    background:rgba(66, 139, 202, 0.75);
    padding:5px;
    display:none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}

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

Assigning a background image based on the quantity of items in an array or object

I'm having trouble appending divs and setting their background image based on the number of items in an array or object. Despite adding the divs correctly, all of them end up with the same background image when only three should have it. Can someone e ...

javascriptjquerycssarraysoop

Having trouble making .click() function work in jQuery

Struggling with translating my javascript code to jQuery for homework. The .click function is causing me some serious issues. Here's a snippet of the code I'm working on: (document).ready(function() { $("start_test").click (function() { ...

javascriptjquery

Adjust the transparency of the image when hovered over, but keep the text in the center

How can I change the opacity of an image on hover and simultaneously display text in the center of the image? This is my code: <div class="col-md-4 j-t"> <div class="middle"> <div class="text-middle">Play</div> < ...

htmlcssbootstrap-4

Utilizing Express for hosting public static resources

I am having trouble configuring my Express server to serve files from the public folder. Despite trying various file path combinations, Pug does not seem to cooperate with Node.js. While I can view the HTML content of the index, the CSS and music files fai ...

cssnode.jsexpresspug

Find the time interval between two timestamps and output the difference in UNIX timestamp format

Is there a way to determine the time difference between two dateTime values? One date is provided by the user, while the other is the current time: User-submitted time - current time = difference in Unix timestamp The format for the user-submitted time i ...

javascriptjquerydatetimedatepicker

Encountering a 404 Error with jQuery Ajax Call Version 3.5.1

The ajaxCall function is returning a 404 error during the onChange select event. My application uses Spring Boot + BootStrap + Thymleaf + jQuery 3.5.1. The URL parameter corresponds to an internal spring boot @RequesteMapping. ERROR: https://i.sstatic.n ...

jqueryajaxspringspring-bootfirefox

Creating a dual-column checkbox design with CSS only

I'm working with a dynamically generated form element that can only be styled using CSS. I need help achieving a specific layout without making any HTML changes, except for the classes. The "element" and "formField" classes are common and cannot be mo ...

javascriptjqueryhtmlcss

I am experiencing some issues with my AngularJS JavaScript code. The root scope is updating correctly, but the other two scopes are not working as expected. Can

My attempt at writing AngularJS JavaScript code seems to be malfunctioning. While the root scope updates properly, the other two scopes FirstCtrl and SecondCtrl do not update as expected when the root scope is updated. I would like all three scopes to upd ...

javascripthtmlcssangularjs

showcasing the picture in the email is consistently

I have created an email system that sends a message to users when they are active in the database, but I am experiencing an issue with the image not displaying. It is important for the image to appear automatically, just like Facebook's logo always sh ...

phphtmlcss

Leveraging Jquery for Enhanced Bootstrap Functionality in Angular 2

Recently diving into NG2, I've been experimenting with adding Slide Up/Down effects to the default Bootstrap 4 Dropdown component. The Bootstrap dropdown component comes equipped with two jQuery Listeners, $(el).on('show.bs.dropdown') and $ ...

jqueryangularjstwitter-bootstrapangular2-directives

Can an image be designated for the "over scrolled" (bounced) section of a mobile webpage?

When users scroll to the top or bottom of a mobile browser page, they usually encounter a default behavior that leaves white space and causes the whole page to bounce back. In iOS applications, it's easy to add images and interactive elements to these ...

androidhtmlioscssmobile

Adjust SVG size as per parent container in AngularJS custom directive

I have a unique situation where I am integrating an angular directive into a dynamically-sized element. The directive itself is made up of an SVG which adjusts based on the size of the container. I am working on making sure the SVG automatically resizes an ...

javascriptcssangularjssvgcross-browser

The background image does not fully extend across the entire space

I am struggling to find the solution to a simple issue on my website, michelleforboe.com. The background image in a div is not covering the entire space as intended. I have tried using calc to set the height of the div, but it seems to be slightly off. A ...

cssparallax

resetting the page's scroll position using a hamburger icon

After adding a hamburger icon to my web project, I noticed that whenever I click on the icon, it scrolls back to the top of the page. I tried adjusting the margin and padding properties, but it still behaves the same way. Even after removing the animation ...

htmlcss

Place the "Close" button outside of the div container

I am facing an issue with the login button protruding slightly outside the border of a div. Despite trying to adjust the code to align it correctly, the issue persists. .closeWindow{ float: right; margin-left: 15px; /* half the width of the close b ...

htmlcss

Steps for displaying a website within a specific Div using HTML

I'm trying to set up a website to open within a specific <div> tag, like the example shown in this link: Responsive. Can anyone spot what I'm doing incorrectly? <html> <head> <script> function mobile320() { ...

javascriptjquerycsshtml

The relationship between the size attribute in HTML and CSS styling based on element size

On one of my pages, there is an input field that looks like this: <input type="text" size="20" name="whatever" /> I would like to keep the size attribute for the input field instead of using CSS. Now, I want to add a select box to the same form wit ...

htmlcss

Adjust the tag's value with each click

I am currently in the process of developing a mobile app that pulls RSS content from multiple websites. However, with so many websites available, I want to only display the ones that the user is interested in. For instance: <a href="#" class="website1 ...

javascriptjquerycordovarss

Issues encountered with making Jsonp requests across different browsers

Hi there, I have a PHP function named func4.php that I want to access from any server: <?php include'includes/connect.php'; $results = mysqli_query($con,"SELECT * FROM `c_clicks`"); while ($row = mysqli_fetch_array($results)) { $clic ...

phpjqueryhtmlajaxjsonp

Pass information between two forms using the Post method and Ajax communication

For my project, I attempted to retrieve data using the POST method in the processing file but encountered difficulties. I need to be able to receive the data through the POST method and display it on process.php. It's worth noting that my inputs are n ...

javascriptphpjquery