I have successfully implemented an overlay over an image with a mouse hover using CSS. Additionally, I am able to toggle a div in JavaScript.
However, my next challenge is to display an overlay by clicking on the image itself, as I find the hover effect to be too intrusive.
I took inspiration from this example
Any suggestions or ideas?
I also experimented with full screen overlays, but found it challenging to make them responsive.
Thank you!
If you're looking for a solution, JQuery is a great option, but it's also possible to solve the issue using pure JavaScript alone.
Firstly, if the goal is to trigger this action on click, remove any hover attributes in your CSS. Currently, there is a hover effect defined as follows:
.photo-img:hover .photo-caption {
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
left: 0;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10%;
background-repeat: no-repeat;
background-position: center center;
}
You can change this by creating a custom class called 'photo-caption-show' which will be toggled on click:
.photo-caption-show {
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
left: 0;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10%;
background-repeat: no-repeat;
background-position: center center;
}
Next, create a function in JavaScript to toggle this class when clicked:
var toggleShow = function(){
var element = document.querySelector(".photo-caption");
element.classList.toggle("photo-caption-show");
}
This function targets the DOM element with the class photo-caption and toggles the specified class.
Finally, to execute this method, you can link it to the desired div, such as a div with the class a-post:
<div class="a-post" onclick="toggleShow()">
If you need to apply this functionality to multiple elements with the same class, you can loop through them using JavaScript like this (although JQuery would simplify this process). Add the following code after defining the toggleClass function:
var elements= document.getElementsByClassName("a-post");
for(var i = 0; i < elements.length; i++) {
var element= elements[i];
element.onclick = toggleClass;
}
I've customized some checkboxes to resemble a select dropdown by hiding the input and using only the label as the visible element. However, I'm struggling to add margin between the elements, which seems to work only when the checkbox is visible. ...
Below is the structure I typically use for PHP MVC: -Resources --/my.css --/my.js -Project --/.htaccess --/index.php --/Other Files & Folders Here is how my htaccess file is configured: Options -Indexes #AddHa ...
In one of my components, I have a property called kpi_kalite[] in the child component. Within the parent component's mounted() method: (The kpi_kalite array is defined in the data property of the parent component) axios.get(URL+ "/KPI/"). ...
My goal is to create a navigation bar on the left and content on the right. The current setup works well, but there is an issue with the scrollbar on the navbar pushing the resize icon inward by about 7 pixels. I am looking for a solution where the content ...
Can files be downloaded from a server and saved in the same location on disk as the downloading HTML file? This functionality is required for an app that serves as a database of HTML files, with periodic updates. The goal is to prompt users for updates an ...
Is there an effective method to properly destroy a three js instance? I am encountering an issue where removing the canvas and re-adding it results in two renderers being created. Presently, my approach involves: Removing all event listeners Cancellin ...
Currently, I am working on a project that utilizes GraphQL. As part of the project, I need to integrate a payment processor. When a user makes a successful payment, the payment processor sends a POST request to a webhook URL that should point to my server. ...
After running my code, I noticed that the headlines didn't transition smoothly - they seemed to jump rather than flow seamlessly. To address this issue, I attempted to incorporate fadeIn and fadeOut functions which did improve the smoothness slightly. ...
I have begun working on my HTML and CSS but need some guidance to create a mobile app without needing to resize it when accessed through the web. Additionally, I would like to make it responsive in CSS. Can you provide me with the necessary code? @c ...
I am facing an issue while trying to use a JavaScript function through the Chrome Console after embedding that function within the Rails Asset Pipeline Manifest. To achieve this, I followed these steps to create and set up a basic Rails 4.2.4 App: $ rails ...
I am experiencing an issue with the alignment of two forms on my webpage when viewed on iOS devices such as iPhone and iPad Safari. Strangely, the forms display correctly on computers (Windows and even Mac with Safari), but on mobile devices the inputs are ...
tag: Looking for a way to seamlessly transfer all the public photo images from an album on a free website to your static website gallery? Wondering if there is a javascript solution or any useful apps to achieve this effortlessly? Let's figure it out ...
I am currently working on converting the script for a specific service (http://luckyorange.com/) into a component. The instructions say to place it in index.html within the public folder, but that appears to be insecure. I'm uncertain whether this tas ...
I'm encountering some challenges while using angular-websocket in a controller within my MeanJS project. The version of MeanJS I’m working with is v0.4.1. To begin, I installed it by running: bower install angular-websocket --save This creat ...
I am trying to cycle through 4 pictures every 3 seconds while fading them in and out. I have successfully changed the pictures, but when I attempt to use fadeOut, I encounter an error stating "Uncaught TypeError: $(...).fadeOut is not a function" in action ...
Looking to set an asterisk (*) next to the Select component in Quasar when it is marked as "required". While I can achieve this with the input component, replicating the same behavior for dropdowns has proved challenging. I attempted using the :deep selec ...
I'm having trouble getting the bootstrap navigation and carousel to fit perfectly on the screen without any overflow. My goal is to have both elements occupy 100vh seamlessly, with no scrolling necessary. My first attempt was adding img-fluid: 100vh; ...
I was browsing the HP-India website and noticed they have a cool autoplay video in the background of a section below the header. I would love to recreate something similar on my own website. Any tips on how to achieve this? ...
I am facing an issue with processing a JSON response: var jsondata = dojo.fromJson(response); There is also a string that I am working with: var jsonString = jsondata.items; The variable jsonString represents the JSON data in the file: jsonString="[ ...
Encountering a dilemma (admittedly, not the best approach). There is a single view featuring a split screen; an input field occupies the left side while its corresponding value appears on the right. Both sides are managed by the same controller, using the ...