So i want to have a function to toggle some text under my image.
Here is the script for the toggle :
$(document).ready(function(){
$('.mariage').click(function(event){
event.stopPropagation();
$(".result_mariage").slideToggle("fast");
});
$(".result_mariage").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".result_mariage").hide();
});
The script is working as intended except when the user click on another link who do an other toggle of information, the toggle stack instead of hidding the last one. If i click anywhere else except another toggle, the information will hide and everything work fine.
( here an image of where i click to trigger the 'bug')
In blue are the other link who toggle stuff
JS Fiddle exemple:
https://jsfiddle.net/karg007/z6y54uro/
sorry if my english is not so good , its not my main language.
Hope those explanation was clear enough for you to help me even if i doubt it :/
Plz dont hesitate to ask more information so i can provide you with what u need to help me.
So to make it short, how do i do to hide my previous toggle when i click my new one?
Edited Answer
So the big issue you're running into OP is that you're not trying to understand the code. A big issue with many new programmers (and unfortunately just as many who have been coding forever) is that they are what I call Copy-Coders. Copying tutorials and answers on stackoverflow may allow you to create your site, complete a few consulting jobs, or even support your whole career but it's not the same as actually knowing how to program.
Doing tutorials and asking questions on SO is perfectly fine (and is in fact how I learned 90% of what I know) but you have to do it with the intent to learn from what you find and not just to complete what you're working on. My advice to you is to really re-read my original answer (I've left it untouched below) and understand how what I showed could be used to accomplish what you want.
With that said, I finish what I start so let's get on with the solution:
I've copied your JSFIDDLE into a Github snippet so you and future users can see the result in the answer. The first thing I immediately noticed is that my code
from the original answer was copied into your existing JS. While this is fine and you correctly changed "text" to "_result", you missed a few things:
My code takes the ID of the clicked element and uses that to look up the id of what should be unhidden. While you correctly changed the lookup code to fit with the ids on your text, you didn't add any ids to the images being clicked on so my code couldn't do anything.
You also didn't remove the 4 functions that you were originally using to implement this feature so it made it look like my code was doing something and working incorrectly, when in fact my code was doing nothing and your code was still doing what it did before (although I definitely see what bug you were talking about before).
Related to my copy-coder rant above, notice how you and I both approached the problem differently and what you can learn from that.
Whereas you wanted to attach a listener function to each item by looking up it's class (which completely unrelated but you aren't using classes correctly and "mariage", etc... fit better as ids which you can still style like classes) I chose to attach a listener to all elements of a single class and then look them up by id.
Your solution requires you to write new JS code for each item you add, and runs the risk of spelling mistakes or forgetting to change something each time you code those functions.
My solution allows you to add as many elements to the HTML as you want and there's no need to change the JS. As long as your images have an id and the text has an id equal to "image id" + "_result" the functionality happens automatically.
I've tried to modify your code as little as possible and only had to delete the 4 functions and add IDs ("mariage" and "amour") to the images in order to get your fiddle to work.
The four functions I removed from your fiddle:
// My toggle code for mariage_result ->text #1
$(document).ready(function() {
$('.mariage').click(function(event) {
event.stopPropagation();
$("#mariage_result").slideToggle("fast");
});
$("#mariage_result").on("click", function(event) {
event.stopPropagation();
});
});
$(document).on("click", function() {
$("#result_mariage").hide();
});
// My toggle code for amour_result ->text #2
$(document).ready(function() {
$('.amour').click(function(event) {
event.stopPropagation();
$("#amour_result").slideToggle("fast");
});
$("#amour_result").on("click", function(event) {
event.stopPropagation();
});
});
$(document).on("click", function() {
$("#amour_result").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The final code:
// Test code to untoggle the previous element toggled
let lastClicked = null;
$(".hover_selection").click(function() {
if (lastClicked) {
lastClicked.hide();
}
let me = $("#" + this.id + "_result");
me.show();
lastClicked = me;
});
// slick slider option
$(document).ready(function() {
$('.slider_index').slick({
infinite: true,
arrows: true,
centerMode: true,
slidesToShow: 1,
variableWidth: true
});
});
.tarif {
width: 750px;
text-align: left;
margin: auto;
margin-bottom: 30px;
margin-top: 50px;
}
.result {
display: none;
}
#mariage_result,
#amour_result,
#certificat_cadeau_result,
#maternite_result,
#portrait_result,
#commercial_result {
width: 780px;
height: auto;
margin: auto;
}
/* -----------CSS SLIDER BELOW THIS POINT-----*/
/* Arrows */
.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
bottom: 10px;
display: block;
width: 150px;
height: 50px;
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev:before,
.slick-next:before {
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: 25%;
z-index: 9999;
}
[dir='rtl'] .slick-prev {
right: 25px;
left: auto;
}
.slick-prev:before {
content: url('https://i.ibb.co/m9zR5YD/avant.png');
}
[dir='rtl'] .slick-prev:before {
content: url('https://i.ibb.co/xGrj9kQ/apres.png');
}
.slick-next {
right: 25%;
z-index: 9999;
}
[dir='rtl'] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before {
content: url('https://i.ibb.co/xGrj9kQ/apres.png');
}
[dir='rtl'] .slick-next:before {
content: url('https://i.ibb.co/m9zR5YD/avant.png');
}
.slider_index {
width: 100%;
margin: auto;
}
.slider_index img {
width: 100px;
margin: auto;
padding: 0px 20px 0px 20px;
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -40px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
font-family: 'slick';
font-size: 30px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
opacity: .75;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="titre_de_page">
<p id="ancre">- Choisissez votre projet-photo -<br/>
</p>
</div>
<div class="slider_index">
<div>
<img class="hover_selection mariage" id="mariage" src="https://via.placeholder.com/300" />
<div class="caption_text">Mariage</div>
</div>
<div>
<img class="hover_selection amour" id="amour" src="https://via.placeholder.com/300" />
<div class="caption_text">Amour</div>
</div>
<div>
<img class="hover_selection maternite" src="https://via.placeholder.com/300" />
<div class="caption_text">Bedon + Bébé</div>
</div>
<div>
<img class="hover_selection portrait" src="https://via.placeholder.com/300" />
<div class="caption_text">Portrait</div>
</div>
<div>
<img class="hover_selection commercial" src="https://via.placeholder.com/300" />
<div class="caption_text">Commercial / Éditorial</div>
</div>
<div>
<img class="hover_selection certificat_cadeau" src="https://via.placeholder.com/300" />
<div class="caption_text">Certificat-cadeau</div>
</div>
</div>
<br/>
<div class="result" id="mariage_result">
<p class="all_texte tarif">
My text to toggle number 1
<br/><br/>
</p>
</div>
<div class="result" id="amour_result">
<p class="all_texte tarif">
Toggle text number 2
</p>
</div>
Original Answer
As far as I understand your question, you simply need a variable to keep track of the previously clicked on item. As for what I've done in the demo beloww, I think it's close enough to what you want to do given we don't have a sample to work with. I imagine the only part where you may differ greatly from my example is in how you look up me as I don't know the exact structure of your DOM or what your exact naming scheme is.
let lastClicked = null;
$(".clickable").click(function() {
if (lastClicked) {
lastClicked.hide();
}
let me = $("#" + this.id + "text");
me.show();
lastClicked = me;
});
#root {
width: 300px;
height: 300px;
background-color: black;
}
.text {
display: none;
}
#one {
width: 50px;
height: 50px;
background-color: red;
}
#two {
width: 50px;
height: 50px;
background-color: green;
}
#three {
width: 50px;
height: 50px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
<div class="clickable" id="one">
<p class="text" id="onetext"> 1 </p>
</div>
<div class="clickable" id="two">
<p class="text" id="twotext"> 2 </p>
</div>
<div class="clickable" id="three">
<p class="text" id="threetext"> 3 </p>
</div>
</div>
As far as i understand from your problem, may be this will help.
$(document).ready(function(){
var checker = false;
$('.mariage').click(function(event){
event.stopPropagation();
if(!checker){
$(".result_mariage").hide("slow");
checker = true;
}
else{
$(".result_mariage").show("slow");
checker = false;
}
});
$(".result_mariage").on("click", function (event) {
event.stopPropagation();
});
$(document).on("click", function () {
if(!checker){
$(".result_mariage").hide("slow");
checker = true;
}
else{
$(".result_mariage").show("slow");
checker = false;
}
});
});
Related
Gratitude to everyone! I wanna implement a function in reactJS, the <button /> concealed when page loading, and will display by hovering the cursor on it, I have tried many ways but still not fixed the problem yet. There're my codes down, thx every master.
.leftButton {
margin-top: 290px;
border: none;
outline: 0;
padding: 0;
height: 36px;
width: 36px;
transition: 3s;
border-radius: 50%;
background-color: #314561;
color: #fff;
position: absolute;
top: 50%;
//z-index: 10;
transform: translateY(-50%);
text-align: center;
font-size: 12px;
cursor: pointer;
display: none;
&:hover {
display: block;
}
}
render() {
return <button className={styles.leftButton>
}
by then, I found somebody said use label wrapping , I have tried, still not work
.father {
cursor: pointer;
}
.leftButton:hover .father {
cursor: pointer;
display: block;
}
return(
<div className={styles.father}>
<button className={styles.leftButton} />
</div>);
No need to wrap your button, just use this css:
.leftButton {
cursor: pointer;
opacity: 0;
}
.leftButton:hover {
opacity: 1;
}
<button className={styles.leftButton} />
I'm working on an accordion. I've used jQuery for the animation. When I click on the accordion head the border that holds the + reduces in size. I only want the plus sign to change and the border to stay the same size.
$(document).ready(function() {
//toggle the component with class accordion_body
$(".accordion_head").click(function() {
$(this).removeClass('coll-back');
if ($('.accordion_body').is(':visible')) {
$(".accordion_body").slideUp(400);
$("plusminus").text('+');
$(this).removeClass('coll-back');
$('.rmv-cls').removeClass('coll-back');
}
if ($(this).next(".accordion_body").is(':visible')) {
$(this).next(".accordion_body").slideUp(400);
$(this).children("plusminus").text('+');
$(this).removeClass('coll-back');
} else {
$(this).next(".accordion_body").slideDown(400);
$(this).children("plusminus").text('');
$(this).children("plusminus").append('<hr class="hr-clc">');
$(this).toggleClass('coll-back');
$(this).addClass('rmv-cls');
}
});
});
$('plusminus').on("click", function() {
$(this).toggleClass('active');
$(this).text() == "+" ? $(this).text("-") : $(this).text("+");
});
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
}
#plus-1 {
position: relative;
top: 5px;
left: -27%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="start">
<div class="acc-main">
<div class="container">
<div class="kind">
<div class="accordion_container">
<div class="accordion-main">
<div class="accordion_head"><span class="plusminus" id="plus-1">+</span>Because She Matters
</div>
<div class="accordion_body" id="a1" style="display: none;">
<p class="para-acc">
</p>
</div>
</div>
</section>
The font used has its characters with different width, that is the characters + and - have different width. So when they switch, it affects the total width of the block.
You can solve it using a monospaced font, such as Monospace, Courier, Courier New or Lucida Console.
Another solution would be set a fixed width for the block.
First, the <span> must be an block element. You add to it display: inline-block. Then padding will be considered within total width as default, so you have 25px padding for left and right. Your block is about 72px (when +), then you can add width: 22px (50px + 22px = 72px fixed width).
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
display: inline-block; /* add this */
width: 22px; /* add this */
}
A little bit the height of the accordion head will change with that, but nothing big.
Add the following css code
.plusminus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
line-height: 70px;
box-sizing: border-box;
}
You have already added .active class to .plusmimus class on click of the accordion. I have added some extra CSS code to make it look better as you required.
$(document).ready(function() {
$('.plusminus').on("click", function() {
$(this).toggleClass('active');
});
});
.plusminus {
display: inline-block;
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 30px;
cursor: pointer;
position: relative;
}
.plusminus::before,
.plusminus::after {
position: absolute;
content: '';
width: 16px;
height: 2px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #FFF;
transition: 0.15s ease-out all;
}
.plusminus::after {
width: 2px;
height: 16px;
}
.plusminus.active::before {
transform: rotate(180deg);
}
.plusminus.active::after {
transform: rotate(90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="plusminus"></span>
Please let me know if this helps.
I was wondering if there is an easy way of creating the animation, similar to Whatsapp one.
When you are on chat screen and go back to chat list, an active element is highlighted gray for a moment (so it shows which chat was opened before).
Is there not complicated way of doing this in JS or CSS? Hopefully most of you guys know what I'm talking about. Unfortunately can't find any examples in the net...
Here is a example of how you could achieve the effect, but with no more details on your project i can't do more.
var li = $('li');
var messages = $('.messages');
var close = $('.close');
li.on('click', function(){
$(this).addClass('active');
messages.addClass('active');
});
close.on('click', function(){
messages.removeClass('active');
li.removeClass('active');
});
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.info {
margin-bottom: 20px;
padding-left: 15px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
background: #ececec;
padding: 10px;
border-bottom: 2px solid black;
cursor: pointer;
transition: background .2s .3s;
}
li.active {
background: gray;
transition: background .3s;
}
.messages {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
transition: transform .3s;
transform: translateX(100%);
padding: 20px;
}
.messages.active {
transform: translateX(0);
}
.close {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
position: absolute;
right: 70px;
top: 30px;
background: black;
color: white;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
}
.close:hover {
opacity: .7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="info" >Click on a person, and close the discussion by clicking on the "X" to see the effect.</p>
<ul>
<li>Bob</li>
<li>Steven</li>
<li>Marie</li>
<li>Marc</li>
<li>Jack</li>
<li>Edouardo</li>
</ul>
<div class="messages">
A lot of messages bla bla ...
...
<span class="close">X</span>
</div>
I’ve written this code which works. Basically, when user hovers a image, a text appears over the image.
It’s a gallery so i need to use $(this).childrenin order to make the correct element to show.
What i don’t understand, i can’t make the h2 .nom_realisation slide toogle. I’ve tried a couple of things without success.
I’m sure it’s pretty simple . If anyone can point me in the right direction ?
DEMO : http://jsfiddle.net/Vinyl/725hcc62/1/
CODE :
CSS
.hide {
display : none;
}
.text {
z-index:100;
position:absolute;
top:0;
left:0;
height:100%;
width: 100%;
text-align: center;
display: table;
background: rgb(134, 0, 0);
/* Fall-back for browsers that don't support rgba */
background: rgba(134, 0, 0, .7);
}
h2.nom_realisation {
color: #ffffff !important;
font-family:'Oswald', sans-serif;
font-size: 30px !important;
font-weight: 300 !important;
text-transform: uppercase;
text-decoration: none !important;
margin: 0;
padding: 0;
vertical-align: middle;
display: table-cell;
width: 100%;
}
h2.nom_realisation a, h2.nom_realisation a:hover {
color: #ffffff !important;
text-decoration: none;
}
.container_img img {
position:absolute;
left:0;
top:0;
}
.container_img {
height:232px;
width:232px;
position:relative;
}
.image_test {
width:232px;
height: auto;
}
HTML
<div class="container_img">
<div class="container_nom_realisation hide">
<div class="text">
<h2 class="nom_realisation">Lorem ipsum</h2>
</div>
</div>
<img class="image_test" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>
JavaScript / jQuery
(function ($) {
$(document).ready(function () {
$(".container_img").hover(function () {
$(this).children('.container_nom_realisation').show('slow');
$(this).children('.text').slideToggle('slow');
}, function () {
$(this).children("img").fadeTo(200, 1)
.end().children(".text").hide();
$(this).children('.container_nom_realisation').hide('slow');
//.end().children(".hover").slideToggle("slow");
});
});
})(jQuery);
.nom_realisation is not a chid of .container_img, so you need .find() instead of children.
You are going to have trouble slide animating a table-cell element. Either don't display it this way or (because I assume you use table-cell for the vertical centre, have another element acting as table cell wrapping your <h2>:
HTML
<div class="container_img">
<div class="container_nom_realisation hide">
<div class="text">
<div class='table-cell'>
<h2 class="nom_realisation">Lorem ipsum</h2>
</div>
</div>
</div>
<img class="image_test" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>
CSS
.hide {
display : none;
}
.text {
z-index:100;
position:absolute;
top:0;
left:0;
height:100%;
width: 100%;
text-align: center;
display: table;
background: rgb(134, 0, 0);
/* Fall-back for browsers that don't support rgba */
background: rgba(134, 0, 0, .7);
}
.table-cell {
vertical-align: middle;
display: table-cell;
}
h2.nom_realisation {
color: #ffffff !important;
font-family:'Oswald', sans-serif;
font-size: 30px !important;
font-weight: 300 !important;
text-transform: uppercase;
text-decoration: none !important;
margin: 0;
padding: 0;
width: 100%;
}
h2.nom_realisation a, h2.nom_realisation a:hover {
color: #ffffff !important;
text-decoration: none;
}
.container_img img {
position:absolute;
left:0;
top:0;
}
.container_img {
height:232px;
width:232px;
position:relative;
}
.image_test {
width:232px;
height: auto;
}
JavaScript
(function ($) {
$(document).ready(function () {
$(".container_img").hover(function () {
$(this).children('.container_nom_realisation').show('slow');
$(this).find('.nom_realisation').slideToggle('slow');
}, function () {
$(this).children("img").fadeTo(200, 1)
.end().children(".text").hide();
$(this).children('.container_nom_realisation').hide('slow');
//.end().children(".hover").slideToggle("slow");
});
});
})(jQuery);
JSFiddle
I do not know if that's what you want, but if it is what I'm thinking, you can do it with pure CSS...
<div class="container-img">
<div class="image-title">LOREM IPSUM</div>
<img class="image" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>
.container-img{
position: relative;
background: #cccccc;
width: 230px;
overflow: hidden;
}
.container-img .image-title{
position: absolute;
background: rgba(0,0,0,0.8);
opacity: 0;
margin: 0 auto;
padding: 200px 0 0 0;
width: 100%;
height: 100%;
min-height: 100%;
color: #ffffff;
text-align: center;
-webkit-transition: all 0.35s;
transition: all 0.35s;
z-index: 10;
}
.container-img:hover .image-title{
opacity: 1;
padding: 35px 0 0 0;
}
.container-img .image{
position: relative;
max-width: 100%;
z-index: 0;
}
Here is a Fiddle: http://jsfiddle.net/rk16vhwe/
I don't think you can a have an underscore in the ccs classname: nom_realisation
Try renaming it everywhere: as nomRealisation for example
Which characters are valid in CSS class names/selectors?
just get rid of:
$(this).children
Also, you are calling $(this) too many times! Call it once. Then use the variable.
var this = $(this);
I am trying to create change image functionality like we can do in GMail account for changing our image.
On mousehover event it shows change image option.
Maybe it is some kind of new concept that I don't know. I am not very good in CSS and JavaScript but I guess that it is a div with changed z-index showing change image option.
Could you please explain how to achieve that kind of effect?
Here is a version using the css pseudo-element :after:
demo
HTML:
<a href="#" class="image">
<img src="http://www.gravatar.com/avatar/c0b4455b645967c1431d73beea9d9c54?s=128&d=identicon&r=PG">
</a>
CSS:
.image img{
width: 100px;
text-decoration: none;
}
.image:after{
content: "Change Image";
display: block;
position: relative;
top: -25px;
width: 100px;
background-color: rgba(77, 144, 254, 0.7);
color: white;
font-weight: bold;
text-decoration: none;
opacity: 0;
transition: opacity 300ms;
}
.image:hover:after{
opacity: 1;
}
If you want a pure CSS solution than you can try it like this
Demo
div.wrap {
position: relative;
display: inline-block;
}
div.wrap img {
position: absolute;
}
div.wrap img:nth-of-type(1) {
opacity: 0;
transition: opacity 3s;
}
div.wrap:hover img:nth-of-type(1) {
z-index: 2;
opacity: 1;
}
div.wrap img:nth-of-type(2) {
opacity: 1;
transition: opacity 3s;
}
div.wrap:hover img:nth-of-type(2) {
opacity: 0;
}
is this what you mean?
CSS
.image {
width: 100px;
height: auto;
}
.popup {
top: -25px;
left: 25px;
width: 150px;
height: 75px;
position: relative;
display: none;
background-color: grey;
border-style: solid;
border-width: 1px;
border-radius: 3px;
}
.image:hover + .popup {
display: block;
}
.popup:hover {
display: block;
}
HTML
<img class="image" src="http://img83.imageshack.us/img83/1905/dsc005142kc.jpg" />
<div class="popup">Change Image</div>
On jsfiddle
I'm not sure I understand what you want but I'd say something like that :
HTML :
<img src="yourimage" />
change
CSS :
a.appearOnHover {
display: none;
}
a.appearOnHover {
display: block;
background-color: #777777;
}