Display or conceal image description upon mouseover

Attempting to create a portfolio page with images and implementing jquery to display and animate the captions on hover. However, when I attempted to do so, it didn't work with the code I have. The code snippet is provided below for reference.

Snippet Example:

$('.port-img').hover(function() {
  if ($(".caption").is('hidden')) {
    $(this).show('slideUp', 'slow');
    $(this).hide('slideDown', 'slow');
  };
});
.caption {
  width: 400px;
  height: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  background: #000;
  color: #fff;
  z-index: 2;
  transition: all .5s;
  visibility: hidden;
}

.image {
  width: 400px;
  height: 400px;
  z-index: 1;
  transition: all .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
  <div class="port-img image">
    <a href=""><img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" /></a>
  </div>
  <div class="caption img-caption">
    <h3>Logo Design, Photoshop</h3>
  </div>
</div>

javascriptjqueryhtmlcss

Answer №1

If you want to achieve this in a different way, you can utilize CSS exclusively:

.custom-design-1{
list-style-type: none;
margin: 0px;
padding: 0px;

}

.custom-design-1 li{
float: left;
padding: 0px;
position: relative;
overflow: hidden;
}

.custom-design-1 li:hover .desc{
opacity: 1;
transform: translateY(-100px);
-webkit-transform:translateY(-100px);
-moz-transform:translateY(-100px);
-ms-transform:translateY(-100px);
-o-transform:translateY(-100px);

}


.custom-design-1 img{
margin: 0px;
padding: 0px;
float: left;
z-index: 4;
}


.custom-design-1 .desc{
cursor: pointer;
position: absolute;
opacity: 0;
top:300px;
-webkit-transition:all 0.15s ease-in-out;
-moz-transition:all 0.15s ease-in-out;
-o-transition:all 0.15s ease-in-out;
-ms-transition:all 0.15s ease-in-out;
transition:all 0.15s ease-in-out;

}
.custom-design-1 .blur{
background-color: rgba(0,0,0,0.7);
height: 300px;
width: 400px;
z-index: 5;
position: absolute;
}

.custom-design-1 .desc-text h1{
text-transform: uppercase;
font-size: 18px;
}
.custom-design-1 .desc-text{
z-index: 10;
color: #fff;
position: absolute;
width: 300px;
height: 300px;
text-align: center;
top:20px;
}
<ul class="custom-design-1">
<li>
<img src="http://via.placeholder.com/300x300" alt="">
<div class="desc">
<div class="blur"></div>
<div class="desc-text">
<h1>Unique Description</h1>
<p>Whatever It Is - Always Extraordinary</p>
</div>
</div>
</li>
</ul>

Answer №2

$('.port-img').hover(function(){
$(".caption").show('slideUp');
$(".caption").hide('slideDown');
});
.caption {
  width: 400px;
  height: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  background: #000;
  color: #fff;
  z-index: 2;
  transition: all .5s;
  display: none;
}

.image {
  width: 400px;
  height: 400px;
  z-index: 1;
  transition: all .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
<div class="port-img image">
<a href=""><img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" /></a>
</div>
<div class="caption img-caption">
<h3>Logo Design, Photoshop</h3>
</div>
</div>

$(this) indicates $('.port-img') and not ('.caption')

Answer №3

Take a moment to review this code snippet.

$('.port-img').hover(function(){
  var $caption = $(".caption");
  if ($caption.is(':hidden')){
    $caption.slideDown('slow');
  } else {
    $caption.slideUp('slow');
  }
});
.caption {
  width: 400px;
  height: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  background: #000;
  color: #fff;
  z-index: 2;
  transition: all .5s;
  display: none; /* default hide */
}

.image {
  width: 400px;
  height: 400px;
  z-index: 1;
  transition: all .5s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
<div class="port-img image">
<a href=""><img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" /></a>
</div>
<div class="caption img-caption">
<h3>Logo Design, Photoshop</h3>
</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

What is the method for displaying data from a JSON file that is associated with the wallet address of the authenticated user in next.js?

I am currently working on a claim page using next.js, where logged in Metamask addresses can perform the following tasks: Access data from a local .json file to check eligibility for claiming an item and display the claim page. Submitting a form to update ...

javascriptjsonnext.jsweb3js

Configuring a custom domain for a Rust service on Clever Cloud: A step-by-step guide

After successfully deploying my Rust service to the Clever Cloud platform and testing it on PROD and localhost, I am now facing the challenge of binding my custom domain with the deployed service. I would like to eliminate the need for using the lengthy C ...

javascriptajaxclever-cloud

Tips for implementing a linear gradient on a bar graph using Highcharts

I'm trying to create a bar chart using highcharts, and I want to apply a linear gradient for the bar fill color. However, I am not sure how to set this up. Can anyone provide some guidance or ideas? Here is an example of what I'm hoping to achie ...

jquerycsshighcharts

Retrieve a div using Jquery Ajax

I am facing an issue with the ajax response. The .php file I have generates a table <div class="result"> <tr class="distr"> <td><input name="somename" value="value"></input</td> <td> ...

jqueryajaxfilterfindresponse

Tips for submitting a jQuery star rating:

I recently installed and added a plugin to one of my pages that transforms radio buttons into stars. While the form control works perfectly, I am facing an issue with submitting the form. The radio buttons are grouped together as stars but they do not subm ...

javascriptjqueryrating-system

What is the recommended life cycle method to use with Redux?

What is the recommended approach for accessing data from the redux store in props? ...

javascriptreactjsreduxreact-redux

When attempting to initiate a new session, Webdriver.io receives an HTML response from selenium

Currently, I am attempting to execute my selenium tests using webdriver.io. However, the test runner is encountering failure when attempting to establish a session: [18:12:36] COMMAND POST "/session" [18:12:36] DATA {"desiredCapab ...

javascriptseleniumwebdriver-io

Unable to retrieve the iframe variable from the parent as it returns undefined

I am trying to retrieve a variable within an iframe from the parent index.html. Here is the index.html code: <!doctype html> <html lang="en-us> <head> <title>Test</title> </head> <body> <p>Test& ...

javascripthtmliframe

How to turn off code splitting (chunks) in Vue.js and Vite.js

Is there a way to turn off chunking in Vue.js and Vite.js when building a project using Rollup.js? I attempted the following approach, but it did not work for me: export default defineConfig({ build: { rollupOptions: { output: { ...

javascriptvue.jsvuejs3rollupjsvite

Error encountered during automatic form submission

My current project involves creating a web notepad that automatically saves changes every minute. The notes are stored in a field called "notas" for each user in the database. Here is some of the code I am using: <html> <head> < ...

javascriptphpmysqlforms

Tips on how to align several divs within another div

I've been attempting to center multiple div blocks within another div or HTML document, but I haven't had any success with the methods I've found on StOv. Here's an image of what I'm aiming for: https://i.stack.imgur.com/DB7uQ.jp ...

jqueryhtmlcss

Error when parsing JSON due to the presence of backslashes within the serialized object

When trying to call a server side function and parse the response in client side using JavaScript and Ajax, I encountered a parse error. It seems that the issue lies with the backslash that the JavaScriptSerializer adds to serialize the object. The respons ...

c#javascriptjqueryajaxjson

use ".otherwise" or /** with the latest version of Angular2 Router to redirect non-routes using wildcards

Can anyone provide guidance on using wild cards to route in the new Router when a non functional route is specified? Similar to the .otherwise method in Angular 1.X router or /** in previous beta router. Additionally, any example or Plunker code would be ...

javascriptangularangular2-routing

Format six images in a horizontal row for desktop and ensure they resize appropriately for mobile viewing

I am looking to arrange images of different sizes in rows depending on the device orientation. For desktop, I want 6 images with proper margins, 2 images in a line for portrait, and 4 images for landscape orientation. Any extra images should be placed in a ...

csssassbootstrap-4

Using JavaScript, generate ten clickable circles on the screen. Each circle should display the number of times it has been clicked in the center when interacted with

I am currently working on my JavaScript skills and would like to implement a fun project involving 10 colorful circles. While I can easily create these circles using HTML and CSS, I require assistance with the interactive functionality using JavaScript. ...

javascripthtmlcss

Struggling with aligning Bootstrap 5 navbar items to the right while keeping the brand on the left side?

I'm struggling to align the items to the right on my navbar. No matter what I try, they just won't budge from the left side next to my brand logo. Here's the code I'm working with: <nav class="navbar navbar-expand-lg navbar-dar ...

htmlcssnavbarbootstrap-5

an unsuccessful attempt to retrieve data was made

After using the fetch function to retrieve a list of notes, nothing appears when I console.log it. I have double-checked the URL and it is correct. Here is the code snippet: import React, { useState, useEffect } from 'react' const NotesListPage ...

javascriptreactjsdjangoapi

Basic HTML user interface elements

I'm struggling with some basic HTML/CSS and I'm looking for guidance on what I might be doing incorrectly or if there is a more efficient approach? I'm attempting to create a simple user interface, and while I have put this together, it doe ...

htmlcssuser-interface

What is the best way to ensure that a mongoose .exec() callback has completed before checking the response object in express?

I am currently developing an application that utilizes Express, Mongoose, and Jest for testing. In order to test my application, I have set up a mongodb in local memory for testing purposes. However, I am facing an issue in some of my tests where the callb ...

javascriptnode.jsmongodbmongoosejestjs

group array by month and year

I have an array structured like this var dataset = [[1411151400000,1686],[1428604200000,1686],[1411151400000,1686]....] The goal is to group the data based on months and calculate the total sum of values for each month. The expected final output should ...

javascriptjquerymapreduce