JSFIDDLE:
https://jsfiddle.net/uj3uw9cp/1/
body {
color: white;
}
a {
color: white;
text-decoration: none;
}
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
img:hover {
opacity: 0.8;
}
img:hover + #text-on-image {
visibility: visible;
}
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong>
</p>
</div>
As you can see in the example on JSFIDDLE, when someone hovers on the image, it will display a link and some text. My main problem is if someone hover on the text or links, the opacity deleted.
So I want that if someone hovers on the link or the text, the opacity will still be 0.8. Any suggestions?
Fixing opacity
That happens because when you hover the text, that will be the hovered element and the image will lost the hover. To solve this, just place the whole block into a container and place the hover selector to that element and select the contained image within it:
#container:hover > img {
opacity: 0.8;
}
Updated solution/JSFiddle
body {
color: white;
}
a {
color: white;
text-decoration: none;
}
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
#container:hover > img {
opacity: 0.8;
}
#container:hover > img + #text-on-image {
visibility: visible;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong></p>
</div>
</div>
Other recommendations
Keep in mind that in HTML5 elements have semantic meaning. Don't use them for their default styling. Achieve the needed style with CSS.
The <strong> element
The <strong> element represents a span of text with strong importance.
From W3C
For its style, use: font-weight: bold;
The <i> element
In some libraries <i> is used for icons, but that is against the HTML specification. Use <span> for this purpose.
The <i> element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text; for example, a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name.
From W3C
For its style, use: font-style: italic;
As you also mentioned Javascript/Jquery, I pose another solution using it
$('img,#text-on-image').mouseenter(function(){
$('img').css('opacity', '0.8')
})
$('img').mouseleave(function(){
$('img').css('opacity', '1')
})
body {
color:white;
}
a {
color: white;
text-decoration: none;
}
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
#container:hover>img + #text-on-image {
visibility:visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong></p>
</div>
</div>
You can add visibility also in #text-on-image:hover, check below code
img:hover + #text-on-image,
#text-on-image:hover {
visibility:visible;
}
Or wrap whole item in to another div and change css to hover over div, check below code
HTML
<div class="parent">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong></p>
</div>
</div>
CSS
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
z-index: 1;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
.parent:hover #text-on-image {
visibility: visible;
}
Case One: https://jsfiddle.net/nikhilvkd/uj3uw9cp/8/
Case two: https://jsfiddle.net/nikhilvkd/uj3uw9cp/7/
Related
I want to make link(.fm) appearing while hovering the image, but my code isn't working (when i hover to the link it starts to appear and dissapear fast).this is the code. I tried usind z-index but it didn't worked , also tried changing positions , but without succes. Any tips please.can you please help me by typing a working code or correcting mine?
.fm a{
position:absolute;
display: none;
background-color: #5D5D5D;
color:pink;
padding:10px;
}
.caine1 img:hover + .fm a{
display:block;
z-index: 1;
}
<div class="caine1">
<img src="1.png" width="400" height="250"></img>
<div class="fm">
Female
</div>
</div>
The code is working , but it have lags while hovering the .fm link
This is another example but using javascript.
This will help with your problem that link disappears so fast.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.wrapper {
width: 400px;
height: auto;
}
.fm {
position: absolute;
padding: 10px;
background-color: #5D5D5D;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: pink;
}
.caine1.fm {
display: block;
height: 250px;
width: 400px;
}
.link {
font-family: Verdana;
font-size: 16px;
color: crimson;
z-index: 1;
display: block;
width: 400px;
}
.hiddenLink {
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="myImage" class="caine1">
<img id="img" src="1.png" width="400" height="250"></img>
<div id="link" class="hiddenLink">This is my hidden link</div>
</div>
</div>
<script>
document.getElementById("myImage").addEventListener("mouseover", function() {
document.getElementById("link").className = "link";
});
document.getElementById("img").addEventListener("mouseleave", function() {
document.getElementById("link").className = "hiddenLink";
});
</script>
</body>
</html>
Your using display none, and there is no transition animation on this component. Display none is binary, meaning there no way to animate this. Instead, use this:
To control the speed of animation, change the 1s in the transition property.
To change what the animation looks like, change the width, height, font-size, and opacity properties in the :hover selector
.fm a{
position:absolute;
width: 0;
height: 0;
visibility: hidden;
opacity: 0;
background-color: #5D5D5D;
color:pink;
padding:10px;
transition: all 1s ease-out
}
.caine1 img:hover + .fm a{
display:block;
z-index: 1;
width: 4rem;
height: 1.5rem;
font-size: 1rem;
visibility: visible;
opacity: 1;
}
<div class="caine1">
<img src="1.png" width="400" height="250"></img>
<div class="fm">
Female
</div>
</div>
I'm very new to coding and am trying to create a portfolio website.
I have used a pop-up code sourced from W3 Schools.
The idea is that when you click on each small illustration, a full-screen pop-up appears with text. I have been able to do it successfully for one pop-up when you click on the flower.
My problem is, I am now unsure how to do a pop-up for each small illustration with different text.
I have added my code to this post, as well as screenshots of it in the browser to give you a better idea of what it looks like with the illustrations. Website Screenshot Here
Any help would be very much appreciated! I'm very stuck.
/* Open */
function openNav() {
document.getElementById("popup").style.height = "100%";
}
/* Close */
function closeNav() {
document.getElementById("popup").style.height = "0%";
}
/* Universal Styles */
body, html {
width: 100%;
}
body {
font-family: "Montserrat", "Helvetica", san-serif;
color: white;
background-color: #9486f2;
font-weight: 300;
font-size: 18px;
}
/* Navigation */
a {
color: white;
text-decoration: none;
font-size: 20px;
}
a:hover {
color:#adff2f;
font-weight: 400;
letter-spacing: 5px;
}
nav {
text-align: right;
padding-top: 30px;
padding-right: 50px;
float: right;
}
nav div {
padding: 5px 0;
}
/* Logo */
header img {
height: 80px;
padding-left: 50px;
padding-top: 50px;
}
/* Heart & Icons */
.container .rowtop {
text-align: center;
}
#flower {
position: relative;
right: 120px;
cursor: pointer;
height: 100px;
}
#adobe {
position: relative;
left: 190px;
}
.container .rowmiddle {
text-align: center;
}
#code {
position: relative;
bottom: 370px;
right: 30px;
}
#heart {
position: relative;
bottom: 60px;
}
#pudding {
position: relative;
bottom: 330px;
left: 50px;
}
.container .rowbottom {
text-align: center;
}
#certificate {
position: relative;
bottom: 210px;
right: 120px;
}
#tv {
position: relative;
bottom: 200px;
left: 190px;
}
/* Pop-Ups */
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 0;
width: 100%;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
opacity: 0.95;
background-color: #cc90ec; /* Black w/opacity */
overflow-y: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 40%; /* 100% width */
text-align: left; /* Centered text/links */
margin-top: 50px;
font-size: 30px;
line-height: 46px;
margin: 0 auto;
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color:#adff2f;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* Wavy Text */
.wavy
{
position: relative;
-webkit-box-reflect: below -12px linear-gradient(
transparent, rgba(0,0,0,0.2));
}
.wavy span
{
position: relative;
display: inline-block;
color: #adff2f;
font-weight: 400;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
#keyframes animate
{
0%
{
transform: translateY(0px);
}
10%
{
transform: translateY(-20px);
}
30%,100%
{
transform: translateY(0px);
}
}
/* Footer */
h5 {
font-family: "Montserrat", "Helvetica", san-serif;
color: white;
font-weight: 200;
font-size: 14px;
}
footer {
padding-left: 50px;
position: relative;
bottom: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>Dom Pooley</title>
<script src="main.js" ></script>
<link rel="stylesheet" href="/Users/dominiquepooley/Documents/03_Dom Personal/05_Portfolio/Portfolio 2020/Portfolio2020/resources/css/style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght#0,200;0,300;0,400;0,700;1,200;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<!-- Header -->
<body>
<header class="flex-container">
<img src="/Users/dominiquepooley/Documents/03_Dom Personal/05_Portfolio/Portfolio 2020/Portfolio2020/resources/images/DomPooley_Logo_01.png"">
<nav>
<div>About</div>
<div>Work</div>
<div>Contact</div>
</nav>
</header>
<!-- Heart and Icons -->
<div class="container">
<div class="rowtop">
<img id="flower" src="resources/images/Pansy_01.png" onmouseover="this.src='resources/images/Pansy_02.png' " onmouseout="this.src='resources/images/Pansy_01.png'" onClick="openNav()">
<img src="resources/images/Adobe_01.gif" id="adobe" alt="" height="120">
</div>
<div class="rowmiddle">
<img src="resources/images/Code_01.gif" onmouseover="this.src='resources/images/Code_02.png' " onmouseout="this.src='resources/images/Code_01.gif'" id="code" alt="" height="40">
<img id="heart" height="500" src="resources/images/Dom_Heart_01.png" onmouseover="this.src='resources/images/Dom_Heart_02.png' " onmouseout="this.src='resources/images/Dom_Heart_01.png'"/>
<img src="resources/images/Pudding_01.gif" id="pudding" alt="" height="120">
</div>
<div class="rowbottom">
<img src="resources/images/Certificate_01.gif" id="certificate" alt="" height="100">
<img src="resources/images/TV_01.gif" id="tv" alt="" height="110">
</div>
</div>
<!-- Pop-Ups -->
<!-- The Overlay -->
<div id="popup" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div id="flowerpop" class="overlay-content">
<p>Thanks to COVID-19, I now have a new hobby -I have been growing, picking, pressing and coating flowers in resin to make jewellery. I would include a photo but they still have that "primary school project vibe"...
<br><div class="wavy">
<span style="--i:1;">*</span>
<span style="--i:2;">W</span>
<span style="--i:3;">a</span>
<span style="--i:4;">t</span>
<span style="--i:5;">c</span>
<span style="--i:6;">h</span>
<span style="--i:7;"> </span>
<span style="--i:8;">t</span>
<span style="--i:9;">h</span>
<span style="--i:10;">i</span>
<span style="--i:11;">s</span>
<span style="--i:12;"> </span>
<span style="--i:13;">s</span>
<span style="--i:14;">p</span>
<span style="--i:15;">a</span>
<span style="--i:16;">c</span>
<span style="--i:17;">e</span>
<span style="--i:18;">*</span>
</div></br></p>
</div>
</div>
<!-- Footer Section -->
<footer>
<h5>Copyright Dominique Pooley 2020</h5>
</footer>
</body>
</html>
You have to make a small change in css.
a:hover {
color:#adff2f;
font-weight: 400;
letter-spacing: 5px;
}
You have to remove letter-spacing: 5px; from css file.
then code looks like :
a:hover {
color:#adff2f;
font-weight: 400;
}
based on what you've mentioned, it sounds like you're trying to have a generic pop-up/modal as a HTML element and then when you click on different illustrations it will open the modal and the modal would contain some text related to that illustration that you clicked on.
What you want to do, is keep your modal, which appears to be the #popup element, add an onclick to each illustration that runs a function which dynamically injects some text by targetting the heading where you need the text to be, for example:
toggleModal (title, subtitle) {
const headingEl = document.querySelector('[data-your-heading]')
const subtitleEl = document.querySelector('[data-your-subtitle]')
headingEl.innerText = title
subtitleEl.innerText = subtitle
// run some code to hide/show the modal below here
}
Next, attach the data-your-* attributes to whichever tag you want to update text with, for instance a <p> tag within your generic HTML modal/pop-up.
And then on each of your illustrations, you add an onclick function and pass the arguments of what text you want, for example:
<button type="button" onclick="toggleModal('My Title', 'My Subtitle')">Show Illustration 1</button>
I have a question about JavaScript: when the user clicks the jump-down button, the text box opens and the direction of button changes and rotates.
I think I should use two photo. when I click the jump-down button, the first photo hides and the other photo replaces, but I don't know how can I do this in JavaScript (the CSS code for imageButton2 doesn't work). Here is my code:
$(function () {
$("#jump_down").click(function () {
$("#wrapper").slideToggle("slow");
})
})
var show1=true;
$('#jump_down').click(function(event) {
document.getElementById('jump_down').style.visibility = show1 ? 'visible' : 'hidden';
document.getElementById('ImageButton2').style.visibility = show1 ? 'hidden' : 'visible';
show1 = !show1;
})
#jump_down{
position: relative;
display: inline-block;
width: 100%;
background-color: rgba(150,190,250,0.7);
padding: 20px 0;
}
#jump_down img{
width: 3%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#wrapper{
background-color: rgba(164,231,246,0.8);
overflow: hidden;
}
#ImageButton2 img{
width: 3%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
<head>
<meta charset="UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>
<body>
<a id="jump_down" href="#wrapper"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/427197-200.png" onClick="swapButtons(false)" style="visibility: visible; "></a>
<img src="http://dl.20script.ir/tools/back-up/UpBtn_20Script_2.png" id="ImageButton2" alt="Get Last Digits" style="visibility: hidden;" onClick="swapButtons(true)" />
<div id="wrapper">
<p>
Hellow
</p>
</div>
</body>
You can have a pure CSS solution for the image rotation.
Rotate the image once your #jump_down div has the class .open
#jump_down.open img{
transform: translate(-50%,-50%) rotate(180deg);
}
To toggle the .open class, apply jQuery toggleClass('open') when #jump_down is clicked.
$(function () {
$("#jump_down").click(function () {
$( this ).toggleClass("open");
$("#wrapper").slideToggle("slow");
})
})
#jump_down{
position: relative;
display: inline-block;
width: 100%;
background-color: rgba(150,190,250,0.7);
padding: 20px 0;
}
#jump_down img{
width: 3%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#jump_down.open img{
transform: translate(-50%,-50%) rotate(180deg);
}
#wrapper{
background-color: rgba(164,231,246,0.8);
overflow: hidden;
}
<head>
<meta charset="UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>
<body>
<a id="jump_down" href="#wrapper"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/427197-200.png" style="visibility: visible; "></a>
<div id="wrapper">
<p>
Hellow
</p>
</div>
</body>
I'm looking at the card-reveal component of the materializecss framework shown here: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ the official doc is here: http://next.materializecss.com/cards.html
For my application, I have moved the <div class="card-content"> to the top to look like this: https://codepen.io/anon/pen/YaqYOj
So I was wondering whether or not it was possible to make the card-reveal animation go from top to bottom, like the top card-content is a curtain that pulls down to reveal more information.
Thanks
You can achieve this by changing transform property of this element .card .card-reveal {}.
And i add extra class to change the transform property make the top card-content is a curtain that pulls down to reveal more information*
Here is the working code
Note: Also add display: block to .card .card-image img fix the bottom gap in your demo.
$('.card-content').click(()=>{
$('.card-reveal').addClass('card-closing');
});
$('.card-reveal .card-title-custom').click(()=>{
$('.card-reveal').removeClass('card-closing');
});
.main {
width: 450px;
margin: 30px;
}
.card .card-image img {
border-radius: 2px 2px 0 0;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
display: block;
}
.card .card-reveal {
padding: 20px;
position: absolute;
background-color: #fff;
width: 100%;
overflow-y: auto;
top: 100%;
height: 100%;
z-index: 1;
display: block !important;
transform: translateY(-200%) !important;
transition: transform .6s;
will-change: opacity, transform;
}
.card .card-reveal.card-closing {
transform: translateY(-100%) !important;
display: block !important;
}
.grey-text.text-darken-4 {
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="main">
<div class="card">
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p>This is a link</p>
</div>
<div class="card-image waves-effect waves-block waves-light">
<img class="activator-custom" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-reveal">
<span class="card-title-custom grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
Here is the working codepen
As you might see I have fixed a kind of text box that will pop up when someone is hovering over that image, but honestly I want a slide-up effect that gone up slowly. Must be completely in pure JavaScript (no jQuery please!). Anyone knows how I can do that.
function show(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "visible";
}
}
function hide(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "hidden";
}
}
.text1 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
.text2 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text1">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text2">BBB</div>
</a>
</div>
</div>
</div>
Here is a version of it that's totally javascript free, just using CSS. I'm going to edit this soon with a slight javascript addition (this current version requires you to have a fixed size).
.caption {
height: 250px;
width: 355px;
overflow: hidden;
}
.caption-image {
height: 100%;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
Version with JS sizing:
Basically the same idea, but when the page is loading it sets certain styles so the images can be what ever size you like.
var captionSel = document.querySelectorAll('.caption');
for (let i = 0; i < captionSel.length; i++) {
let image = captionSel[i].querySelector(":scope > .caption-image");
let text = captionSel[i].querySelector(":scope > .caption-text");
text.style.width = image.clientWidth - 20 + "px";
captionSel[i].style.height = image.clientHeight + "px";
}
.caption {
overflow: hidden;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
I'll give it to you even better: No javascript at all!
This is possible with pure CSS:
.tumb-wrapper {
position: relative;
overflow: hidden;
}
.text {
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
position: absolute;
bottom: -30px;
transition: 300ms;
left: 0;
}
.tumb-wrapper:hover .text {
bottom: 28px;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text">BBB</div>
</a>
</div>
</div>
</div>
The transition css property animates whatever change you make. This way, when you hover over the .tumb-wrapper div, the .text div will slide up.
You should note however, that ancient IE versions won't be able to use this
I usually do this with only CSS.
Just save the first and second image right next to each other on one file... then you use css to change the position of the background image. To make things nicer i add a css-animation to the movement of the background image.
Example of my code:
<div id="thumb_Wrapper">
<div class="_Thumb">
<img src="images/Thumb.jpg" class="Animate_left">
</div>
</div>
The CSS
#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;}
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;}
._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;}
._Thumb > img:hover{left:-18px; cursor:pointer;}
CSS Animation
.Animate_left{transition:left .3s;}
Now all you have to do is swap out the image.
onHover - the image in the thumbnail will smoothly slide to the left; revealing the rest of the image/ showing the other image.
You can set how far to the left(or right) you want the thumb-image to first appear by adjusting the value of 'left' in the ._Thumb class.
You can set how far the image slides on hover by adjusting the img:hover{left:-18px} to what ever you like; instead of 18px.