Display and animate a div when hovered over inside a wrapper element

I have a unique challenge with an image gallery that I'm working on. Each image is enclosed within a box, and I am looking to incorporate hidden icons on the right and left sides of the box. These icons should not be visible to the user, but rather appear as transparent layers representing about 5-10% of each side. The idea is for these icons to slide in when hovered over, triggering specific actions based on their position. For example, hovering over the icon on the right could delete the image, while hovering over the icon on the left could set it as the featured image of a post. While I can manage the events using Backbone, I am struggling to find a solution for the CSS/HTML and potentially jQuery aspects.

.box {
    float: left;
    min-height: 282px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    width: 282px;
}
img {
    max-height: 282px;
    max-width: 100%;
    z-index: 1;
}

Thanks for any help or insights! - Radzo

jqueryhtmlcss

Answer №1

Here is some code you may find helpful - check out this JSFIDDLE

<div class="container">
  <div class="box">
    <span class="fa fa-camera fa-3x">
      <span class="title">Image Title</span>
      <span class="desc">Image description</span>
    </span>
    <span class="fa fa-times-circle fa-3x"></span>
    <img src="http://www.example.com/image.jpg"/>
  </div>
</div>


.box {
  position: relative;
  float: left;
  height: 282px;
  width: 282px;
  overflow: hidden;
}
img {
  max-height: 282px;
  max-width: 100%;
}
.fa-camera,
.fa-times-circle {
  position: absolute;
  display: block;
  padding: 10px;
  width: 131px;
  height: 272px;
  transition: all 0.4s ease-in;
}
.fa-camera {
  left: -120px;
  text-align: left;
  font-size: 22px !important;
}
.fa-camera:hover {
  background: rgba(255,255,255,0.5);
  left: 0;
}
.fa-times-circle {
  right: -120px;
  text-align: right;
  font-size: 26px !important;
}
.fa-times-circle:hover {
  right: 0;
  cursor: pointer;
}
.title,
.desc {
  display: block;
}
.title {
  margin-top: 10px;
  font-size: 12px;
  font-weight: bold;
}
.desc {
  margin-top: 8px;
  font-size: 12px;
}

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 is the best way to extract the data parameter from an Ajax request in a Restful web service?

When making an AJAX call to a Restful web service, I encounter a problem where the data parameter passed is null. Here is the code snippet: var b2bValues = "Some String"; var lookupUrl = "http://ip:{port}/ImageViewer/rest/ImageServlet/callrest"; var l ...

jqueryajaxweb-servicesrestspring-annotations

The HTML file that was downloaded appears to contain jumbled and nonsensical text

I recently downloaded some HTML files from an Android application. They display perfectly when opened within the app, but appear jumbled on my computer. There is also a CSS file included. If necessary, I can provide the CSS file for reference. While I am n ...

androidhtmlencode

Emptiness is the only value that gives me true success

When I have to verify whether your content is empty or not, if it is empty, simply go back and signal success to me. It will not move forward and inform me that there is an issue with the lack of content. Issues arise only when I have empty fields for em ...

jquery

Issue with Cross Site Scripting Iframe Permission Denied

I'm encountering a Cross Site Scripting error when using the code below. Javascript function resizeIframe(ifRef) { var ifDoc; //alert(ifRef); try { i ...

javascripthtmlwordpressiframecross-domain

unable to connect to the web service using webview

When attempting to call a web service or display an alert, I am encountering some issues: Here is the code from my activity: mWebView = (WebView)findViewById(R.id.webViewRootAciviy); mWebView.setWebViewClient(new WebViewClient()); mWebView.setWebChromeCl ...

javascriptandroidjqueryhtml

Utilizing mat dialog in conjunction with the bootstrap sticky top class to enhance functionality

I am encountering an issue where, upon clicking to delete an entry, a mat dialog should appear with everything else in the background greyed out. However, the problem I am facing is that when I attempt to delete an entry, the dialog appears but the sticky ...

htmlcssangularangular-materialbootstrap-5

What steps should I take to create an in-site product filtering system with multiple dropdowns by utilizing a JSON file?

I have created an in-site redirect tool for our E-Commerce platform by utilizing resources from this website. I am looking to enhance the functionality of these in-site redirects by implementing a JSON file that contains options tailored to our existing li ...

javascriptjqueryjson

Trouble expanding Bootstrap Dropdown menu on mobile devices

I am currently facing an issue with a Bootstrap navbar that includes a dropdown menu for selecting courses. On my desktop, everything works perfectly fine when I click on the courses tab. However, when I try to select a course on mobile, nothing happens. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Adjust grading system based on user interaction with JavaScript

I am currently working on a grading system for a website and I am attempting to modify the interpretation of grades when a column is clicked. Specifically, I am looking to convert Average (%) to Letters to 4.0 Grade Average. To achieve this, I am using Jqu ...

javascripthtml

Having multiple HTML select elements and utilizing jQuery AJAX

I am looking to implement a dynamic multiple select using AJAX and jQuery. The first select (c1) is functioning correctly. When I click on it, it triggers the appearance of another select (c2). Similarly, clicking on the second select (c2) should lead to ...

phpjqueryajaxselect

Sending an image file using AJAX and jQuery

I am currently using Mustache JS to generate a template called 'addUser1' for display purposes. However, when I execute this code, only the image location is being sent to the server, not the actual image itself. What could be causing this issue? ...

javascriptjqueryajax

Aligning buttons vertically

My challenge is to arrange textboxes with buttons in a horizontal grid system, but I'm having trouble aligning the buttons vertically. I need to use a grid system so that these items can stack properly on mobile devices: <link rel="stylesheet" hre ...

htmlbootstrap-4

Looking to showcase duplicate ranks that have been selected, and specifically identify which ranks are being duplicated using JavaScript/jQuery

In this section, we have implemented the logic to identify duplicate ranks. However, in addition to displaying which ranks are duplicated, I also aim to highlight the specific rank that is being duplicated within the range of 0 to 18. function validate( ...

javascriptjavajquery

jQuery body background changer/utilizer

I am currently developing a website that requires the functionality to switch between background images with the ability for users to navigate through them using back and forth arrows. Each background image should have a unique dynamic description associa ...

phpjqueryhtmlcss

Adjust the spacing between the inputRoot and input in Material UI Autocomplete

Recently, in one of my projects, I've been utilizing Material-UI's Autocomplete component. Despite its lack of flexibility with resizing, I managed to tweak certain width, height, and font size attributes successfully. However, I'm currently ...

cssreactjsautocompletematerial-uimargin

Console shows successful jQuery ajax request, but the callback function is not being executed

I've been working on a jQuery POST request that's been giving me some trouble. Here is a snippet of the code I'm using: $.ajax("/myurl",{ data:{ ... }, mimeType:"application/json", dataType:"application/json", me ...

javascriptjqueryajax

What is the best way to display two cards while concealing a third one using a "show more"

Is there a way to hide certain cards by default and only show them when the user clicks on a "View more" button? I have multiple cards, but I want to hide the last one initially and reveal it when the button is clicked. I would really appreciate any assis ...

javascriptjqueryhtmlcss

"Utilizing the power of Angular 6's JSON pipe

Looking for a well-structured formatted JSON, but all I get is confusion and this strange image: https://i.sstatic.net/6mvBu.png Does anyone have any insights on what might be causing the issue? HTML <span style="font-weight: 500;">Payload Data: ...

htmlcssangulartypescript

Separate the area into three parallel sections

My expectation was for the li elements inside the ul to be divided into 3 parallel lists of elements appearing next to each other. However, the list is showing up in a straight list. I thought using col-xs-3 would solve the issue, but it doesn't seem ...

cssreactjstwitter-bootstrap

The best way to display a jquery dropdown menu using selenium in a django test

I am having trouble displaying a jQuery dropdown menu in a Django test using Selenium. Here are some snippets of the code ("admin_user" is the link that should reveal the dropdown menu with the link "Coop Admin App"): def wait_loading(self, driver, xpath_ ...

jquerypythondjangoseleniumtesting