The image showcases interactive hover effects that resemble a button popping up

Welcome to my HTML code showcase:

               <div class="container"> 
                <a target="_self" href="flower_gallery.htm">
                <img  data-src="holder.js/180x180" style="height:20%;width:100%;float:left;"
                src="../images/profile-pic.jpg" alt="Flower">
               </a><p class="description">Beautiful flower picture</p>
               </div>

CSS Styling:

 #container .description {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

#container:hover .description {
visibility:visible;
}

This image represents the main profile picture on my webpage. When hovering over the image, a button and additional text with opacity are displayed, offering options like editing the profile picture. This functionality can be achieved using jQuery.

See the live demo Here

javascriptjqueryhtmlcss

Answer №1

Modify

 #wrapper .text {

to 

 .wrapper .text {

Also, change

#wrapper:hover .text {

to 

.wrapper:hover .text {

wrapper should be a class, not an id. Remember, id is represented with # and class is represented with .

Answer №2

You can create a similar effect using opacity and CSS3 Transitions. Check out this Fiddle for an example.

HTML

<div class="container"> 
  <a target="_blank" href="klematis_big.htm">
    <img  data-src="holder.js/180x180" style="height:20%;width:100%;float:left;"
  src="../goyal/profile-pic.jpg" alt="Klematis"/>
  </a>
  <p class="description">Text Text Text ...</p>
</div>

CSS

.container .description {
  position:relative;
  bottom:30px;
  left:10px;
  opacity:0;
  transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -webkit-transition: opacity 0.3s linear;
}

.container:hover .description {
  opacity:1;
}

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

Error: HTML code being displayed instead of form value in Ajax request output

For the past couple of days, I've been struggling with an Ajax issue that I just can't seem to figure out. Despite looking for a solution online, nothing seems to work. Below is the code snippet that's causing me trouble: <!DOCTYPE html& ...

javascriptphpajaxhttp

Issue with Angular App: Bootstrap navbar not displaying on smaller screens

I am working on an Angular app (using Angular 11.2.4 with Bootstrap 4.5.3) and facing an issue where the navbar is not rendering correctly on screens smaller than ~580 pixels wide. Even when I click the toggler to 'expand' the collapse region, n ...

htmlangularbootstrap-4angular-ui-bootstrap

Ways to avoid Next.js from creating a singleton class/object multiple times

I developed a unique analytics tool that looks like this: class Analytics { data: Record<string, IData>; constructor() { this.data = {}; } setPaths(identifier: string) { if (!this.data[identifier]) this.da ...

javascriptreactjstypescriptnext.js

What is the best way to disable list items in a UI?

Check out my assortment: <ul class="documents"> <li class="list_title"><div class="Srequired">NEW</div></li> <li class="doc_price>1</li> <li class="doc_price>2</li> <li c ...

javascript

Tips for activating a function when the sidebar menu is opened in Ionic 2

How can I trigger a function when the SideMenu is open in Ionic 2? I came across this link here for Ionic-1, but I'm wondering how to accomplish this in Ionic 2. Any help would be appreciated. Thanks! ...

javascriptangularjsionic2

Error: The requested collection# cannot be found in the Node.js Express routing system

Recently, I have started learning nodejs and implemented a simple API that allows users to log in with passport and then redirects them to the /collections route. While this part is functioning correctly, I am encountering issues with POST requests which a ...

javascriptnode.jsexpress

Converting a JS string into HTML markup

I recently developed a basic web application to manage telnet connections with routers using Node.js, Express, and WebSockets. After establishing a connection, the terminal stream is transmitted through a websocket as UTF-8 strings. However, my current is ...

javascripthtmlutf-8

The message "Error: Unknown custom element: <router-view> - have you properly registered the component?" is prompting for a solution

Even though the name is correctly capitalized in all my component instances, I am still encountering an error. After researching similar issues online, it appears that the problem usually revolves around naming discrepancies. However, I have double-checked ...

javascriptvue.jsvue-router

Is there a more efficient method for streamlining the Express-Validator middleware in a separate file

In my current project, there is a lot of validation required using Express-Validator. In each file, I find myself repeating the same validation code: //Validation and Sanitizing Rules const validationRules = [ param('tab').isString().isLength({ ...

javascriptnode.jsexpressexpress-validator

Unexpected token error in TypeScript: Syntax mistake spotted in code

Being new to Angular, I understand that mastering TypeScript is crucial for becoming a skilled Angular developer. Therefore, I created this simple program: function loge(messag){ console.log(messag); } var message:string; message = "Hi"; loge(messa ...

javascriptangulartypescript

Why does my anchor appear with a different style compared to my submit button?

I encountered an issue where I have created a submit button and anchor link with the same class name and style, but they are displaying differently. The anchor link appears to be larger than the submit button. You can see the difference in size here: Belo ...

htmlcss

Ways to deselect a checkbox if the selected option is anything other than 'All'

I have a set of checkboxes generated from a database, but one checkbox labeled "All" serves as a way to select or deselect all other checkboxes with a single click. If all the options are checked and any individual option (other than 'All') i ...

javascriptjquerycheckboxfunctional-programming

Utilizing radio buttons for displaying or hiding a div element, along with implementing validation using jqueryvalidation.org

I am currently working on a functionality where I need to toggle the visibility of specific divs based on user input. Additionally, I only want to validate the fields within the visible div and not the hidden ones. If the user selects "Yes" in the radi ...

jqueryradio-buttonjquery-validateshow-hidehidden

I am struggling to set up angular-localstorage4

I have been following the instructions in the provided link: angular-localstorage4 When attempting to import WebStorageModule and LocalStorageService from angular-localstorage, I encounter an error in the console even though the compilation is successful. ...

javascriptangular

Can you explain the functionality of dismissing a Bootstrap alert?

In this example, we can see how Bootstrap handles dismissible alerts: <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidde ...

javascriptcsstwitter-bootstrap-3

Tips on managing errors in a router with the help of middleware

Currently, I am utilizing node and express to create a server. However, there seems to be an issue where errors that occur within a router are not being properly handled, causing the entire server to crash: In my Server.js file: import SubRouter from &apo ...

javascriptnode.jsexpress

The banner appears unusually compact when viewed on mobile devices

It's about time for me to delve into the intricacies of responsive and adaptive design, but I'm hoping there's a straightforward solution to tackle this issue. Here is my desktop web page as displayed in my browser: https://i.stack.imgur.c ...

htmlcssresponsive-designadaptive-design

GULP showing an error message "ACCESS DENIED"

Exploring the fascinating realm of Gulp for the first time has been quite an adventure. I have managed to create a gulpfile that effectively handles tasks like reading, writing, and compiling sass/css/js/html files. However, when I try to access the site o ...

javascriptnode.jsgulp

Automate populating input fields with data

I need help with a form that has four input boxes. Is it possible to automatically fill the remaining three input boxes with the value entered in the first box when the user clicks a button using JavaScript? Or should I aim to prefill the textboxes with ...

javascripthtml

Triggering an event upon selecting a dropdown option

I'm currently working on a form that includes a dropdown menu. My goal is to display specific keywords for each trip when selected from the menu (preferably below the input field, as shown in the code snippet below). .show has been set to display:non ...

javascriptformsinputdropdownkeyword