Navigating within a Positioned Fontawesome Icon using CSS

I'm trying to make the font awesome icon only appear when hovering over an image, specifically in the top right corner, but I'm having trouble achieving this. Below is a sample code snippet that demonstrates the issue.

// Get the modal
var modal = document.getElementById('lazy-mymodal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('lazyimg-popup');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
#lazyimg-popup {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#lazyimg-popup:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 30px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 1100px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    max-width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #000000;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


.lazyimg i {
    top: 50%;
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}
<div class="lazyimg"> 
        <img id="lazyimg-popup" src="http://moimir.org/wp-content/uploads/2015/08/1.jpg" alt="Trolltunga, Norway" width="700px" height="auto">
<i class="fa fa-expand" aria-hidden="true"></i>                              
</div>

<!-- The Modal -->
                        <div id="lazy-mymodal" class="modal">
                          <img class="modal-content" id="img01">
                          <span class="img-close">&times;</span>                              
                          <div id="caption"></div>
                        </div>

<i class="fa fa-expand" aria-hidden="true"></i>

the above needs to be displayed on hover, not click. Just like the image is clickable and enlarges into modal boxes, the fontawesome icon should also enlarge the same image in the modal box when clicked.

Answer №1

To enable clicking and hovering through the icon, add pointer-events: none to the close button.

For more information, click here

// Access the modal
var modal = document.getElementById('lazy-mymodal');

// Insert the image into the modal - use its "alt" text as a caption
var img = document.getElementById('lazyimg-popup');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// Close the modal when the user clicks on <span> (x)
span.onclick = function() {
    modal.style.display = "none";
}
.lazyimg {
    position: relative;
    width: 500px;
    height: 300px;
}

#lazyimg-popup {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    width: 100%;
    height: 100%;
}

.full {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    transform: translateY(-50%);
}

.lazyimg:hover .full {
    display: block;
}

#lazyimg-popup:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 30px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 1100px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    max-width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #000000;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
    <div class="lazyimg">
        <img id="lazyimg-popup" src="http://moimir.org/wp-content/uploads/2015/08/1.jpg" alt="Trolltunga, Norway" width="700px" height="auto">
        <i class="fa fa-expand full" aria-hidden="true" style="pointer-events: none;"></i>
    </div>

    <!-- The Modal -->
    <div id="lazy-mymodal" class="modal">
        <img class="modal-content" id="img01">
        <span class="img-close">&times;</span>
        <div id="caption"></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

Diagram with Cascading Style Sheets and Hypertext Markup Language

As I work on creating a flowchart, here is the code that I have developed: #flowchart { width: 580px; text-align: center; font-family: sans-serif; font-size: .8em; margin: auto; } #flowchart a { ...

Position a div to float in the top right corner without overlapping its sibling header

Is there a way to position a div in the top right corner of a section without overlapping the text of a h1? This is the HTML code: <section> <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1> < ...

Utilizing the power of Bootstrap, you can create a row of eye-catching

I am struggling to get 3 columns of cards to display in a row using bootstrap and CSS. Currently, only 2 columns are showing up. Here is the code snippet: <style type="text/css"> .card{ width: 350px; } </style> ...

Issues with maintaining row column format in Bootstrap cards

I am currently facing an issue with the layout of my template: <center> <form class="site-form" action="{% url 'movie:recommend'%}" method="post"> {% csrf_token %} <input style="font-color:#000000;color: #008 ...

Is there a way to specifically target CSS media queries if the device resolution is similar, but the device screen size (measured in inches) varies

I possess two distinct gadgets. 1. T2 light - LCD : 15,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query target : width = 1336px 2. T2 mini - LCD : 11,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query t ...

Using CSS Flex to style text that has been transformed

I'm attempting to achieve a specific date display effect, but I'm running into some difficulties. Despite using flex and text transform, I can't seem to get rid of the extra width on the right side of the year. Here's my current outcom ...

Using colored circles in ASP Dropdownlist ListItems (without jQuery): A step-by-step guide

Objective: To create a Dropdown list that displays a green circle if someone's Availability is True, and a red circle if someone's Availability is False. Note: The task needs to be accomplished without the use of jQuery, as it is restricted in t ...

What other aspects of mobile design could mobile-specific CSS be focused on aside from screen size?

As a newcomer to responsive web development, I have found myself puzzled by media queries. For example, how does the following code snippet target specifically iPhones with a max-device-width of 320px: @media screen and (max-device-width: 320px) {} Woul ...

Is there a way to adjust the transparency of the reflection while utilizing the -webkit-box-reflect property?

Exploring the capabilities of the -webkit-box-reflect property in Chrome has proven to be quite interesting. By utilizing the code snippet provided below (taken directly from the Webkit blog), I have been able to achieve a fading reflection effect: -webki ...

Detecting collisions using CSS animation

I'm currently working on a unique "game" project. Check out the code snippet here: jsfiddle function update() { coyote.applyForce(gravity); coyote.edges(); coyote.update(); cactus.update(); if (coyote.intersects(cactus)){ alert("colisio ...

The functionality of hover and custom attribute is not operational on IE8

Unfortunately, I am facing issues with the hover and custom attribute functionality in IE8. Even in compatibility mode, it refuses to work properly. The code snippet provided (fiddle) works perfectly fine on Mozilla, Opera, Safari, and Chrome but encounter ...

What could be causing my page to appear off-center?

Hey there! I'm still learning the ropes, but I could really use a hand with this issue: So, while I was playing around with HTML and CSS, I wanted to create a page with a fixed size that would be perfectly centered on the screen. My approach was to p ...

Developing a unified input element containing numerous fields

After @grateful answered this question, I wanted to elaborate in case it could benefit others... In my project, there's a page called rsetup.php which has some PHP code to access a MySQL database for filling the HTML content of the page. This HTML ge ...

Creating a three-tiered navigation menu using Bootstrap 4

I am struggling with adding a 3-level dropdown menu to my website. My HTML code seems correct, and I have added the necessary CSS styles, but the last dropdown menus are appearing in the wrong place. <li class="nav-item dropdown"> ...

Navigational dropdown menu in Bootstrap

I'm a bit rusty with Bootstrap and I'm struggling to make my NavBar dropdown toggle. I've gone through all the documentation and forums available but can't seem to figure it out. Any ideas on what I might be missing? <nav class=" ...

Styling jQuery Draggable and Droppable <li> elements

I am facing a challenge with my drag and drop functionality using jQuery. While the drag drop feature works perfectly, I need to display two separate pieces of information from a database on each "li" item in different styles. My goal is to include a "tra ...

The <div> positioned at the highest point within its container

Looking to position a div at the top within its parent div, while leaving space below it unused. The default behavior appears to be the opposite, with the inner div dropping down to the bottom of its container and creating empty space above it. It seems l ...

Unable to identify the Xpath selector for the "Account settings button" and "find my iPhone" features within iCloud

When trying to access my iCloud account settings and locate the "Find my iPhone" button on iCloud.com, I am encountering issues with my selectors. It seems like there are no frames on the page, but the Xpaths I'm using are not matching. Here are the ...

Whenever I attempt to use window.print(), the styling gets completely messed up. I've experimented with both @media screen and @media print, but unfortunately, I

I am working on creating an invoice, the design looks perfect in the browser, but when I try to window.print() the style gets corrupted. I attempted to include @media screen and @media print, but I am still facing the same issue. The invoice form is incorp ...

How can you determine the total number of elements with a specific class assigned to them?

I am currently using jQuery to identify which IDs have a specific class name. This information is crucial as I am employing toggleClass() from jQuery to display and hide certain divs. When a button is selected, I want a viewport to either appear or disappe ...