When clicked, activate a different overlay div

I have an image that I want to enhance with some effects. I was able to add a hover overlay using a div. Now, I am looking to add an onclick event to change to another overlay div.

Below is the code I have so far, or you can view the CodePen Here

  <div id="box">

  <div id="overlay">
    <span id="plus">+</span>
  </div>

CSS:

body    {  background:#e7e7e7;}
#box    {  width:300px;
           height:200px;
           float: left;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
          border-bottom:2px solid #fff;
          border-right:2px solid #fff;
          margin:5% auto 0 auto; 
          background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
  background-size:cover;
border-radius:5px;
overflow:hidden;}

#overlay    {  background:rgba(0,0,0,.75);
               text-align:center;
               padding:45px 0 66px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;}

#box:hover #overlay {
               opacity:1;}

#plus       {  font-family:Helvetica;
               font-weight:900;
               color:rgba(255,255,255,.85);
               font-size:96px;  }

Currently, I have only implemented a hover effect. When the image is clicked, I want to change the plus symbol (+) to a minus symbol (-) and display a small div at the bottom of the image with a brief description.

Upon triggering the second overlay div, clicking the minus symbol should revert back. I will provide an image below to illustrate what I am trying to achieve.

In the image below, you can see the blue div that should appear upon the onclick event.

javascriptjqueryhtmlcss

Answer №1

Initially, it seems that the image should be displayed inline as content rather than as a background image, so I have proceeded with that approach.

Codepen Demo

Updated HTML

<div class="box">
  <img src="http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg" alt="" />
  <div class="overlay">
    <h1 class="plus"></h1>
  </div>
  <div class="description">
    <p>Lorem ipsum dolor.</p>
  </div>
</div>

In terms of CSS, I have utilized absolute positioning, pseudo elements, and some CSS3 transform for layout. This approach allows for flexibility in adjusting font sizes and border sizes for the pseudo element (the arrow).

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.box    {  
  width:300px;
  height:200px;
  box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
  border-bottom:2px solid #fff;
  border-right:2px solid #fff;
  margin:5% auto 0 auto; 
  border-radius:5px;
  overflow:hidden;
  position: relative;
}

.box img {
  display: block;
}

.overlay    {
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:rgba(0,0,0,.75);
  text-align:center;
  opacity:0;
  -webkit-transition: opacity .25s ease;
}

.box:hover .overlay {
  opacity:1;
}

.overlay .plus:before { 
  content:"+";
  margin: 0;
  padding: 0;
  position: absolute;
  top:50%;
  left:50%;
  font-family:Helvetica;
  font-weight:900;
  color:rgba(255,255,255,.85);
  font-size:6rem;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}


.overlay.clicked .plus:before {
  content:"-";
}

.description {
  display: block;
  position: absolute;
  width:100%;
  height:30%;
  background-color: lightblue;
  bottom:-30%;
  text-align: center;
  transition: bottom 0.25s ease;
}

.description:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  left:50%;
  border-style:solid;
  border-color: transparent transparent lightblue transparent;
  border-width: 16px;
  top:0;
  -webkit-transform:translate(-50%, 100%);

}

.overlay.clicked + .description {
  bottom:0%;
}

.overlay.clicked + .description:after {
  -webkit-transform:translate(-50%, -100%);
}

Lastly, a bit of JQuery is used to create a clicked (or active) interaction using .toggleClass.

Jquery

(function($) {
   $(".plus").click(function () { 
     $(this).parent().toggleClass("clicked");
    });  
})(jQuery);

Answer №2

Employ jQuery library

$(document).ready(function(){
  var button = $(".plus");
  var mask = $(".overlay");

  button.click(function(){
     mask.toggle('fast');
  })
});

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 I duplicate an array of objects in javascript?

I'm struggling with a javascript issue that may be due to my lack of experience in the language, but I haven't been able to find a solution yet. The problem is that I need to create a copy array of an array of objects, modify the data in the cop ...

javascriptarraysobjectjavascript-objectsarrayobject

PHP File Upload with AJAX and JSON Integration for Form Submission

Here is a code snippet that demonstrates how to read data from a form, save files in a folder, and write the information to a JSON file: Javascript: var name = $("#name").val(); var image = $("#image")[0].files[0]; var model = $("#model")[0].files[0]; v ...

phpjqueryjsonajax

The stick division shows some bouncy behavior when seen on a mobile device

When viewing on mobile, the #main-categories div seems to be jumping instead of smoothly sticking to the top. What could be causing this behavior? Here is the code snippet I have: var s = $("#main-categories"); var pos = s.position(); $(window).scroll(f ...

jqueryhtmlcsssticky

Using jQuery to verify if an element is currently in the process of being animated

Is there a way to determine if an element is currently being animated, similar to using $(...).is(':animated')? I would like to verify this information. ...

jqueryanimation

What is the method for adjusting the font size of the label in an Angular mat-checkbox element?

I've been trying to adjust the font size of a mat-checkbox's label, but no matter what I do, the component's default styles keep overriding my changes: Using !important Trying ::ng-deep Applying a global style in styles.scss <mat-checkb ...

cssangularangular-materialangular-forms

npm build issues stemming from browserlist configurations

I am encountering an issue with my create-react-app failing to build, showing the following error: ./src/index.css Module build failed: BrowserslistError: Unknown browser query `dead` at Array.forEach (<anonymous>) I have carefully reviewed my ...

javascriptjson

What is the technique for combining a string and an HTML element using literal values?

Trying to merge text with a hyperlink: const myText = `${t('privacyTxt')}` + `${<a>{t('privacyLink')}</a>}`; output: If you want to know more about our data processing, check out our[object Object] What else do I need ...

javascriptreactjstemplate-literals

What is the best way to extend the functionality of npm script with command line arguments

After defining multiple scripts in my package.json file, I encountered an issue when attempting to run the $ npm run lint:fix command. The argument --fix did not get passed down to ./node_modules/.bin/standard, resulting in an error. { "name": "project" ...

javascriptnode.jsnpmnpm-scripts

I'm encountering a Type Error message in VS Code terminal stating that converting data to string is not a function. Can someone please help me understand this type error? I am new to Node.js and

const fileSystem = require('fs'); const data = fileSystem.readFileSync('example.txt'); if (data) console.log(data.toString()); console.log('Program Ended'); This is the code I wrote: and this is the error message my terminal ...

javascriptnode.js

What causes Firefox's CPU to spike to 100% when a slideshow begins that adjusts the width and left coordinates of certain divs?

Seeking Advice I'm in need of some help with identifying whether the code I'm working on is causing high CPU usage in Firefox or if it's a bug inherent to the browser itself. The situation is getting frustrating, and I've run out of so ...

javascriptjqueryhtmlcss

Decoding a Json list with angularJS

I have a JSON dataset structured as follows: $scope.jsondata = [{filename:"/home/username/textfiles/0101907.txt"},{filename:"/home/username/textfiles/0124757.txt"},{filename:"/home/username/textfiles/0747332.txt"} ... ]; Here is my HTML code: <li ng ...

angularjsjsonhtml

Issue with bootstrap: the navbar highlight and anchor href are not functioning as intended

I'm currently working on creating a Navbar and implementing the navbar highlighting feature using the active bootstrap class. Below is the code I have tried: <!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap CSS ...

htmlcssbootstrap-5

Mongoose throws a "Possibly unhandled rejection" error when trying to use ContactList.insert as it is not a recognized function

Currently working on a small project using the MEAN stack, but encountering an issue with sending a post request where console.log displays an error. https://i.sstatic.net/7nUXH.jpg Error Message: Possibly unhandled rejection: {"data":"TypeError: Contac ...

javascriptnode.jsmongoose

Buttons to maximize, minimize, and close individual sections on a webpage

I am fairly new to front end development and I must say, I am absolutely enjoying every bit of it. Here is a little challenge that came my way. It may seem simple to some but it got me thinking. I have three sections on the right side of my website. I wa ...

javascriptjqueryhtml

What is the best way to trigger dependent APIs when a button is clicked in a React Query application

On button click, I need to call 2 APIs where the second query depends on the result of the first query. I want to pass data from the first query to the second query and believe using "react-query" will reduce code and provide necessary states like "isFetch ...

javascriptreactjsaxiosreact-query

The bug in Polymer 1.0 where a custom element is causing issues when clicking under the toolbar

Issues have arisen with a custom element I created, named <little-game></little-game>. Here is the template code for <little-game></little-game>: <template> <a href="{{link}}"> <paper-material elevation=& ...

htmlcsspolymerpolymer-1.0

Finding an element's id within a click event inside an iframe

<iframe id="myiframe" src="doc.html"> <button id="btn1"></button><!-- how do I retrieve this id? --> </iframe> $('#myiframe').on('click', function () { alert(this.id); }); I am trying to make it ...

javascriptjqueryhtml

What is the most effective way to show the current date on a webpage: utilizing JavaScript or PHP?

Looking to show the current date and time on a webpage. There are two potential methods to achieve this: (1) Using PHP, for example: <?php echo date('Y-m-d H:i:s');?> (2) ... or JavaScript, like so: <div> <script>document.wri ...

javascriptphpdate

Guide on incorporating a Python script into a website using DJango

I am new to Django and looking for guidance. My goal is to have users input text in an HTML textbox, then process that text using Python and display it on the website. Despite going through documentation and tutorials, I have not been successful in gettin ...

javascriptpythonhtmlcssdjango

Empty initial value for first item in array using React hooks

My goal is to store an array that I retrieve from an API in a useState hook, but the first entry in my array always ends up empty. The initial array looks like this: (3) ["", "5ea5d29230778c1cd47e02dd", "5ea5d2f430778c1cd47e02de"] The actual data I recei ...

javascriptreactjstypescriptasync-awaitreact-hooks