Applying a gradient overlay to an image using CSS

Feeling a bit frustrated with this issue. I'm working on my Joomla website utilizing Phoca Gallery, and the code it generates includes the following:

<img class="pg-image" src="/images/phocagallery/other/thumbs/phoca_thumb_m_something.jpg" alt="Something">

My goal is to add a gradient overlay to the image displayed as a thumbnail on my website (the image with .pg-image class). However, since the image isn't a background image, none of the solutions for overlaying gradients from my online searches have been effective.

Any suggestions would be greatly appreciated!

Thank you! :)

cssimagejoomlaoverlay

Answer №2

To start, let's make an overlay div:

<div class="photo">
  <img class="pg-photo" src="http://example.com/photo.jpg" alt="Description">
</div>
<div class="overlay-div"></div>

.overlay-div {
    background-color: rgba(100, 200, 150, 0.7);
    bottom: 0;
    left: 0;
    opacity: 0.7;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.photo {position: relative;}

Check it out on Fiddle!

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

What could be causing my React Router component to display incorrect styling?

While working with react-router, I encountered an issue where the text from the routed page started appearing in the navbar. Even though I separated it as its own component and it functions correctly, this specific problem persists. As a newcomer to React, ...

javascriptcssreactjsreact-router

HTML/CSS - Enhances user experience by zooming in on select tag when tapped on mobile devices

I am experiencing an issue with a select menu on mobile devices. Whenever I tap on the menu, it seems to zoom in slightly. Is there a particular -webkit property causing this behavior? How can I prevent the screen from zooming when I tap on the select me ...

javascripthtmlcsswebkit

Struggling with CSS float problems

I'm currently working with the Pure CSS framework and my code resembles this: <div class="container pure-g"> <header class='pure-u-1'> <h1 class='logo'> <a href="#">TEST</a> </h1> &l ...

htmlcssyui-pure-css

I'm currently attempting to determine the total cost of a series of operations, however, I am not receiving any results

Here is the code snippet from my HTML file: <tr> <td><input id="z1" type="number" oninput="calculateSubTotal()"> </td> <td>Shirts - WASH - Qty 1 to 4</td> <td>2.50 ea</td> ...

javascripthtmlcss

Loading Animation for Pages and Tables

I'm experiencing a choppy and sudden transition when switching between two pages that contain tables populated using ng-repeat. Upon loading, the footer is positioned halfway up the page below the table heading until the table loads and the layout adj ...

javascripthtmlcssangularjsanimation

Is there a way to adjust the selected color of a TextField?

I'm currently working with the Material-UI React library and I am trying to customize the border color of a TextField when it is clicked or in focus. This is my attempt so far: const useStyles = makeStyles((theme) => ({ input: { borderWidth: ...

cssreactjsmaterial-ui

having difficulty implementing the blur effect in reactJS

Currently, I am working on developing a login page for my project. Below is the code snippet I have implemented for the functionality: import React, { useState, createRef } from "react"; import { Spinner } from "react-bootstrap"; import ...

javascriptcssreactjs

changing the css transformation into zoom and positioning

My goal is to incorporate pinch zoom and panning using hardware-accelerated CSS properties like transform: translate3d() scale3d(). After completing the gesture, I reset the transform and switch to CSS zoom along with absolute positioning. This method ensu ...

javascriptcssmulti-touchcss-transformshammer.js

Styling a half circle in React Native

Despite my efforts, I have not been able to find anything quite like this: example Could anyone provide guidance on implementing this with react? ...

cssreactjsreact-native

Styling with CSS or using tables: What should you choose?

Is there a way to replicate the frame=void functionality in CSS, or will I need to manually add frame=void to each table I create in the future? <table border=1 rules=all frame=void> I attempted to search for a solution online, but unfortunately, m ...

htmlcss

Error 404 occurs when images are not able to load when stored in a different directory

When I encounter a custom 404 Error on my website at http://ericmuir.tk and it happens in a directory other than the home one, none of the images on the page load. I faced a similar issue with loading CSS scripts, but resolved it by using style tags which ...

htmlcsswebhttp-status-code-404

What is the best way to programmatically insert new rows into a table

I am currently working with the foundation 5 framework (not sure if this is relevant). I need to ensure that each CELL is treated as a distinct item/value when passing information to another page, and I am unsure of how to approach this issue. It should cr ...

javascripthtmlcsszurb-foundation

When I toggle the div to close on mobile, I want it to show on desktop

My attempt at creating a toggle button to hide and show content was not successful. I struggle with coding in Javascript/Jquery. In the desktop view, the description displays perfectly (see image here), but in mobile view, there is a button to toggle hidi ...

javascriptjqueryhtmlcss

Arranging images in a row with the help of :before and :after styling

Looking to use the pseudo selectors :before and :after to create a border around a div with images, but running into some issues. The :after image is not positioning correctly on the right side of the element and the text is dropping below the image. Check ...

htmlcss

Sticky Angular Headers

I am struggling to create a table on my angular page that has fixed headers and footers. <table class="table table-bordered table-striped table-hover" fixed-header> <thead> <tr> <th>Name</th> <t ...

htmlcssangularjshtml-table

Internet Explorer 11 encountering a flaw with absolute positioning

In my web page, everything looks good in Google Chrome, Firefox, and Opera, but I'm facing an issue with Internet Explorer 11. Here is the simplified HTML: <div class="container"> <div class="page-content"> <div id="corner ...

csscss-positioninternet-explorer-11

Utilizing offsets/push in the correct manner

I have been developing a Bootstrap website and I wanted to get some feedback on my current code structure. The design is coming along nicely, but I am unsure if this aligns with best practices? <div class="container-fluid"> <div class="row"> ...

htmlcsstwitter-bootstrap

"Enhance your website navigation with the Bootstrap BS3 navbar clc Dropdown-Submenu feature

Utilizing Bootstrap BS3 for the construction of my Django website. I created a dropdown-submenu that is operational on http://www.bootply.com/nZaxpxfiXz# However, when implementing the same in my project, I encountered: The issue is that the dropdown-men ...

jquerycssdjangotwitter-bootstrapdrop-down-menu

What steps should I take to adjust the CSS code to properly integrate with my HTML file?

There seems to be an issue with the code provided. The CSS for the menu bar is not functioning properly with the HTML. <!DOCTYPE html> <html> <body class="news"> <head> <style type="text/css">body { margin: 0; paddi ...

htmlcss

What is the best method to modify the hover text color in a Bootstrap navbar?

Whenever the cursor hovers over the letters, I attempted to modify their color, but unfortunately, it didn't work as expected. nav a { text-decoration: none; } .logo { height: 3rem; } .navbar-nav .nav-item .nav-link.custom:hover { color: ...

csstwitter-bootstrapbootstrap-5