Apply the :after pseudo-class to the specified element

I am struggling with implementing an overlay effect on two images on my website.

My goal is to add an overlay when the images are clicked, and I have tried creating this effect using the after pseudo class.

Unfortunately, the overlay does not seem to work as expected in my demo. Can someone help me identify where I might be making a mistake?

Demo: https://jsfiddle.net/vu0hntuf/

jQuery(".option").on('click',function() {
  jQuery(this).toggleClass('option optionActive');
});
.option::after, .optionActive::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
}

.optionActive::after {
  display: block;
  background: rgba(0, 0, 0, .6);
}

.col-md-4 {
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
}
@media (min-width: 768px) {
.col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="1">
  </div>
</div>

<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="1">
  </div>
</div>

javascriptjqueryhtmlcss

Answer №1

This snippet should be included in our project. Appreciate it!

  .option::after, .optionActive::after {
     content: " ";
   }

Answer №2

Give this a try. I've made some changes to the CSS, so please review it.

jQuery(".option").on('click',function() {
  jQuery(this).toggleClass('option optionActive');
});
.optionActive{
  position:relative;
  display: inline-block;
}
.optionActive:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  color: #FFF;
  background: rgba(0,0,0,0.6);
  content:"";
  position:absolute;
}

.col-md-4 {
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
}
@media (min-width: 768px) {
  .col-md-4 {
      flex: 0 0 33.33333%;
      max-width: 33.33333%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="1">
  </div>
</div>

<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="1">
  </div>
</div>

Answer №3

To enhance your CSS, make sure to include the Content:''; code snippet within the pseudo element. For more information on this, refer to this resource.

jQuery(".option").on('click',function() {
  jQuery(this).toggleClass('option optionActive');
});
.option::after, .optionActive::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #FFF;
  content:'';
}

.optionActive::after {
  display: block;
  background: rgba(0, 0, 0, .6);
}

.col-md-4 {
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
}
@media (min-width: 768px) {
.col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="1">
  </div>
</div>

<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="1">
  </div>
</div>

Answer №4

pseuso element like after or before doesn't work without content property. You have to specify content in your css.Below is the code snippet.You can read more about after here.

jQuery(".option").on('click',function() {
  jQuery(this).toggleClass('option optionActive');
});
.option::after, .optionActive::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content:"";
  color: #FFF;
}

.optionActive::after {
  display: block;
  background: rgba(0, 0, 0, .6);
}

.col-md-4 {
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
}
@media (min-width: 768px) {
.col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="1">
  </div>
</div>

<div class="col-md-4">
  <div class="option">
    <img src="http://placehold.it/200x200" class="debttype" data-type_id="2">
  </div>
</div>

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

How can a regular number be used to create an instance of BigInteger in jsbn.js?

I attempted both methods: const num1 = new BigNumber(5); And const num2 = new BigNumber(7, 10); However, I encountered the following error: Error: 'undefined' is not an object (evaluating 'num2.nextBytes') bnpFromNumberjsbn2.js:126 ...

javascriptjquerybigintegerjsbn

Error in table layout caused by asynchronous .get jQuery function

I am facing a challenge in populating a timetable with specific information for each cell from a database. The table is being dynamically refreshed using the following function: function refreshTable() { //Form values var park = $('#Park&apos ...

javascriptjqueryajaxasynchronous

What is the best way to maintain an ongoing sum of multiple values using bacon.js?

Experimenting with the power of bacon.js. I want to maintain a dynamic total of values from a set of text inputs. The example on the github page utilizes the .scan method along with an adding function, which functions well for simple increment and decremen ...

javascriptcoffeescriptreactive-programmingbacon.js

I aim to display a success message upon form submission

Can someone assist me with a problem I'm facing? I need to display a success message after successfully submitting a form. I'm utilizing bootstrap and jQuery for this task, along with an email service known as emailJS. This service enables us to ...

javascriptbootstrap-4

Developing instance members and methods in JavaScript

After encountering a challenge with creating "private" instance variables in JavaScript, I stumbled upon this discussion. Prior to posing my question, I wanted to provide a thorough overview of the problem. My goal is to showcase a complete example of corr ...

javascriptvariablesprototypeinstanceprivate

Transform "<Mutation>" to useMutation

In my removeUser page, I have implemented a < Mutation > and handled errors using the submitForm() function. The initial code worked perfectly: export default function RemoveUserPage() { const [isSubmitted, setIsSubmitted] = useState(false); con ...

javascriptreactjstypescriptgraphqlapollo

What is the process for invoking a server-side Java function from HTML with JavaScript?

Can someone help me figure out the best way to invoke a Java method from HTML (I'm working with HTML5) using JavaScript? I attempted using Applets but that approach didn't yield any results. My goal is to extract the value from a drop-down menu i ...

javajavascripthtmlajax

Triggering a .click() event on an automatically generated image with jQuery

I'm currently implementing the following code snippet: xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("picHint").innerHTML=xmlhttp.responseText; } } xmlht ...

phpjqueryajax

Displaying or concealing fields through Javascript depending on the category type of the results item

I am facing an issue with displaying certain fields in each individual property search result based on the property type. For example, if a property is classified as Land, I do not want the bedrooms and bathrooms fields to be visible, but if it is a Villa, ...

javascriptjqueryhtmlcss

Sorry, the variable you are trying to access has not been

I encountered an unexpected error: TypeError: slides[i] is undefined. It's puzzling because shouldn't the slides variable be accessible? <script> $('document').ready(function() { $.ajax({ type: "POST", ...

javascriptjqueryajaxjsonsettimeout

When a text is wrapped by an HTML div using absolute positioning, is there a way to prevent it from wrapping without relying on white space

I have a group of div elements positioned absolutely on the screen. If any div contains content that is too big for the screen, the browser wraps it into multiple lines to fit. However, I do not want this behavior. Instead, I want the overflowing content ...

javascriptjquerycsshtml

Switch between images using JavaScript or JQuery

I am looking for a way to switch between "edit.png" and "ok.png" images on my web page. When the page initially loads, it displays buttons with "edit.png" images, as shown in the screenshot https://i.sstatic.net/QmgdM.png My goal is to have the image rema ...

javascriptjqueryhtml

Exploring Three.js: Meshes, Triangles, and the Beauty of Lambert

I have a function that generates stars, here is the code: function CreateStar( radius, thickness, isWireframe, starColor) { // material var starMaterial = new THREE.MeshLambertMaterial({ color: starColor, ...

javascriptopengl-esthree.js

The absence of a React JS button on the page

I'm in the process of creating a React demo application and I've come across this component: var MediaList = React.createClass({ displayName: 'MediaList', getInitialState: function() { return { tweets: getTweets(numTweets) ...

javascriptreactjs

Implementing Ajax Like Button functionality in a Ruby on Rails application

I have a Ruby on Rails project that includes a User model and a Content model, among others. I recently implemented a feature where users can "like" content using the acts_as_votable gem. Currently, the liking functionality works as expected but it requir ...

javascriptruby-on-railsrubyajaxsocial-media-like

Utilizing Bootstrap, the layout structure consists of 4 columns for desktop, 3 columns for small laptops, 2 columns for tablets, and

I need assistance with setting up responsive columns in my HTML code using Bootstrap. Specifically, I want 4 columns per row on desktop, 3 columns per row on tablet, and 2 columns per row on mobile devices. Despite searching on Stack Overflow, I couldn&apo ...

htmlcssbootstrap-5

Tips on creating a visually appealing layout using jQuery

Displayed below is the format I need to present in a visually appealing layout. This involves adding a header and footer, while ensuring that the jquery event values in the cash and balance textboxes are retained. <div class="small-12 medium-6 large-6 ...

jqueryprinting

Tips for Disabling ML5 Posenet

Looking to halt Posenet after completing app task private sketch(p: any) { p.setup = () => { this.poseNet = ml5.poseNet(p.createCapture(p.VIDEO), { outputStride: 8 }); this.poseNet.on(&apos ...

javascripttypescriptp5.jsml5.js

The sudden sight of an image stretching off the page to the right

I have created a simple view with an image on the right and some text on the left. Here is how it appears: return ( <View style={styles.companyContainerStyle}> <View> <Text>{this.props.companyNameAr}</Text> ...

cssreactjsreact-native

There was an issue loading the map on an HTML code that was returned from an ajax request

I'm currently working on building my own personal website, which is also my first webpage, and I'm encountering some difficulties with displaying a Google map. Here's a breakdown of my situation: my webpage consists of four links that load ...

javascriptcssajaxgoogle-maps