We Keep Coding

Hide element if scrolled to maximum of container

I worked with this code:
$(document).ready(function() {
// Show left gradient if scrolled x value is greater than 0
$("#scroll-area").scroll(function() {
if ($("#scroll-area").scrollLeft() > 0) {
$("#left").css("display", "block");
}
// Hide left gradient if scrolled x value is 0
if ($("#scroll-area").scrollLeft() == 0) {
$("#left").css("display", "none");
}
// Calculate with of the scroll area
var fullWidth = $('#scroll-area')[0].scrollWidth;
// Doesn't work: Hide right gradient if scrolled to maximum
if ($("#scroll-area").scrollLeft() == fullWidth) {
$("#right").css("display", "none");
}
// Doesn't work: Show gradient if scrolled less than maximum
if ($("#scroll-area").scrollLeft() < fullWidth) {
$("#right").css("display", "block");
}
});
});
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 20px;
}
#container {
width: 50%;
height: 120px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
#left,
#right {
width: 50px;
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
}
#left {
background: linear-gradient(90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
left: 0;
display: none;
}
#right {
background: linear-gradient(-90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
right: 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="scroll-area">
<div id="text">Please scroll horizontally to the right side, and back again. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>
If you scroll horizontally to the end of the #text element, the gradient on the right side should be hidden. If you scroll to the left side again, the gradient should be shown again.
Has anyone an idea how to program that?

It should work as you want. Basically i calculate scrollable area in fullWidth and compare it with scrollPosition
$("#scroll-area").scroll(function() {
var fullWidth = $('#scroll-area')[0].scrollWidth - $('#scroll-area')[0].clientWidth;
var scrollPosition = $(this).scrollLeft();
if (scrollPosition > 0 && scrollPosition <= fullWidth) {
$("#left").css("display", "block");
$("#right").css("display", "block");
} else if (scrollPosition == 0) {
$("#left").css("display", "none");
$("#right").css("display", "block");
} else if (fullWidth <= scrollPosition) {
$("#left").css("display", "block");
$("#right").css("display", "none");
}
console.log('Scroll pos',scrollPosition);
console.log('Full width', fullWidth);
});
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 20px;
}
#container {
width: 50%;
height: 300px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
#left,
#right {
width: 50px;
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
}
#left {
background: linear-gradient(90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
left: 0;
display: none;
}
#right {
background: linear-gradient(-90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
right: 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="scroll-area">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>

You need to subtract the offsetWidth from the scrollWidth:
var fullWidth = $('#scroll-area')[0].scrollWidth - $('#scroll-area')[0].offsetWidth - 1 // -1 for browser compatibility
$(document).ready(function() {
// Show left gradient if scrolled x value is greater than 0
$("#scroll-area").scroll(function() {
if ($("#scroll-area").scrollLeft() > 0) {
$("#left").css("display", "block");
}
// Hide left gradient if scrolled x value is 0
if ($("#scroll-area").scrollLeft() == 0) {
$("#left").css("display", "none");
}
// Calculate with of the scroll area
var fullWidth = $('#scroll-area')[0].scrollWidth - $('#scroll-area')[0].offsetWidth - 1;
// Doesn't work: Hide right gradient if scrolled to maximum
if ($("#scroll-area").scrollLeft() >= fullWidth) {
$("#right").css("display", "none");
}
// Doesn't work: Show gradient if scrolled less than maximum
if ($("#scroll-area").scrollLeft() < fullWidth) {
$("#right").css("display", "block");
}
});
});
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 20px;
}
#container {
width: 50%;
height: 120px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
#left,
#right {
width: 50px;
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
}
#left {
background: linear-gradient(90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
left: 0;
display: none;
}
#right {
background: linear-gradient(-90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
right: 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="scroll-area">
<div id="text">Please scroll horizontally to the right side, and back again. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>

Javascript not working on ipad (tested on ios 13.7 and ios 14.0 - in chrome, safari and firefox) or iphone (tested on iphone SE ios 13.7)

I wonder if you can help me please? I am trying to get a a piece of javascript to work on ios devices. I have multiple images on a page in divs and on click I would like to slide across a panel of information (hidden to the left) and once that panel slides in, if that panel is clicked, I would like it to slide back out to the left.
Here is the code I have that works perfectly on all desktop browsers but doesn't do a thing on ios - I can't understand it and am uncertain how to test or check for problems on ios.
Here is a Fiddle: https://jsfiddle.net/adpLqbt2/31/
CSS
.box {
display: inline-block;
position: relative;
width: 500px;
height: 500px;
overflow: hidden;
}
.overlay-btn {
display: inline-block;
position: absolute;
cursor: pointer;
height: 500px;
width: 500px;
z-index: 10;
background: url('../img/icons/info.svg') 98% 98% no-repeat;
}
.overlay-content {
position: absolute;
top: 0;
left: -500px;
width: 500px;
margin: 0;
height: 500px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.over-show {
left: 0;
height: 500px;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
}
HTML
<div class="box">
<div class="overlay-btn"></div>
<div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<img src="https://via.placeholder.com/500" alt="rah" />
</div>
<div class="box">
<div class="overlay-btn"></div>
<div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<img src="https://via.placeholder.com/500" alt="yay" />
</div>
<div class="box">
<div class="overlay-btn"></div>
<div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<img src="https://via.placeholder.com/500" alt="see" />
</div>
JS
const triggers = document.getElementsByClassName('overlay-btn');
const triggerArray = Array.from(triggers).entries();
const panels = document.getElementsByClassName('overlay-content');
const infoButtons = document.getElementsByClassName('overlay-btn');
for (let [index, trigger] of triggerArray) {
let triggerIndex = index;
function togglePanel() {
panels[triggerIndex].classList.toggle('over-show');
infoButtons[triggerIndex].classList.toggle('js-fade');
}
trigger.addEventListener('click', togglePanel);
infoButtons[triggerIndex].addEventListener('click', togglePanel);
}

How to make an HTML element to expand on hover and overlay similar neighbor elements in the same flex container without moving them?

There are N cards of the same class, each with a different amount of text inside. All cards are in the same flex container (row, wrap). In some cards part of the text is hidden because it exceeds the dimension limits for the class. I want such cards to expand and show the entire content on mouse hover. So far I can make it either to overlay the text only (as in the image) or to expand while moving the neighbors. Instead, such card should overlay above neighbor cards without moving them.
Ideally, the hovered card should expand both horizontally (if possible, symmetrically, otherwise to the left or to the right only), and vertically downwards.
Here is a very simple example created for this question. Each card contains a random length substring of lorem ipsum.
JavaScript, generates cards with random amount of text:
'use strict';
const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac auctor augue mauris augue neque gravida in fermentum et. Accumsan in nisl nisi scelerisque. Sed pulvinar proin gravida hendrerit lectus. Tortor id aliquet lectus proin nibh nisl condimentum. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit.';
const items = Array(30).fill(0)
.map(() => Math.ceil(lorem.length * Math.random()))
.map(idx => lorem.substring(0, idx))
.map(txt => `<div class="lorem-card">${txt}</div>`)
.join('');
const html = `<div class="cards-container">${items}</div>`;
document.body.innerHTML += html;
html is a skeleton only because the content is generated by JavaScript
<html>
<head>
<meta charset="utf-8">
<title>Cards demo</title>
<link rel="stylesheet" type="text/css" href="./cards.css">
</head>
<body>
</body>
<script src="./gen.js"></script>
</html>
And here is current CSS:
.cards-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: space-between;
}
.lorem-card {
flex-grow: 1;
background-color: white;
border: 3px solid #008CBA;
padding: 15px;
margin: 15px;
max-width: 150px;
max-height: 200px;
overflow: hidden;
opacity: 1;
}
.lorem-card:hover {
flex-grow: 10;
height: auto;
width: auto;
overflow: visible;
border: 3px solid red;
z-index: 100;
}
https://jsfiddle.net/fpmuc5Lz/3/

So far, this is what I have concluded: it is impossible to not cause the other divs to move while overlaying an element with an initially not absolutely positioned element. As a result, I've decided to create a copy element that is absolutely positioned that has exactly the same width of the original element. This is what I changed in your JS:
'use strict';
const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac auctor augue mauris augue neque gravida in fermentum et. Accumsan in nisl nisi scelerisque. Sed pulvinar proin gravida hendrerit lectus.';
const items = Array(30).fill(0)
.map(() => Math.ceil(lorem.length * Math.random()))
.map(idx => lorem.substring(0, idx))
.map(txt => `<div class="lorem-card"><div class="lorem-card--real">${txt}</div><div class="lorem-card--substitute">${txt}</div></div>`)
.join('');
const html = `<div class="cards-container">${items}</div>`;
document.body.innerHTML += html;
And your CSS:
.lorem-card {
position: relative;
flex-grow: 1;
max-width: 150px;
max-height: 200px;
margin: 15px;
overflow: hidden;
}
.lorem-card--real {
max-width: 150px;
max-height: 200px;
padding: 15px;
border: 3px solid #008CBA;
background: #FFF;
text-overflow: ellipsis;
}
.lorem-card--substitute {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 15px;
background: #FFF;
border: 3px solid #008CBA;
}
.lorem-card:hover {
overflow: visible;
}
.lorem-card:hover .lorem-card--real {
opacity: 0;
}
.lorem-card:hover .lorem-card--substitute{
height: auto;
overflow: visible;
border: 3px solid red;
z-index: 100;
}
The idea is to create a container for two Lorem cards. One that has a set width and height (200px and 150px at maximum) and one that can expand dynamically and overlay other elements without causing other divs to move (by using position: absolute). As can be seen, the effect is that the absolutely positioned element only expands vertically downwards. Furthermore, as height is set to auto, CSS transition does not work, which leads to the following suggestion.
My current idea, if you want it to expand both horizontally both ways and vertically downwards, is to compute the total width of the overall string (arranged in one horizontal line) and the height the largest character. Then, use some math to constraint the div's width and height ratio to 4:3 (while handling edge cases, e.g. specifying min-width and min-height) until you find an area that fits the whole text. This will allow you to have the exact width and height needed and as you can specify the exact width and height, you can also use CSS transition to smoothly expand the div.
Here is the new code: here
EDIT
After fiddling some more, here's the final code. In summary, what I added:
A dummy function that you can configure to decide how much the div should expand
Detection of whether an div needs to expand based on its TextNode's bounding rectangle
A smooth transition (the timeout logic has not been tested with edge cases)
Here's the full-working example:
'use strict';
const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac auctor augue mauris augue neque gravida in fermentum et. Accumsan in nisl nisi scelerisque. Sed pulvinar proin gravida hendrerit lectus.';
const items = Array(30).fill(0)
.map(() => Math.ceil(lorem.length * Math.random()))
.map(idx => lorem.substring(0, idx))
.map(txt => `<div class="lorem-card"><div class="lorem-card--real">${txt}</div><div class="lorem-card--substitute">${txt}</div></div>`)
.join('');
const html = `<div class="cards-container">${items}</div>`;
document.body.innerHTML += html;
function getTextWidthAndHeight() {
return [210, 280]
}
let cards = document.querySelectorAll('.lorem-card')
let resetCardOverflow
for (let card of cards) {
card.addEventListener('mouseover', e => {
clearTimeout(resetCardOverflow)
card.style.overflow = 'visible'
// Configure "getTextWidthAndHeight" to fit the new rectangle size needs
let size = getTextWidthAndHeight()
let targetReal = card.querySelector('.lorem-card--real')
let targetSubstitute = card.querySelector('.lorem-card--substitute')
let textNode
for (let child of targetReal.childNodes) {
if (child.nodeName == '#text') {
textNode = child
break
}
}
// Get "height" of textNode's bounding box
let textHeight = 0;
let range = document.createRange();
range.selectNodeContents(textNode);
if (range.getBoundingClientRect) {
var rect = range.getBoundingClientRect();
if (rect) {
textHeight = rect.bottom - rect.top;
}
}
// If text exceeds box height (padding considered)
if (textHeight > 200 - 30) {
targetSubstitute.style.width = `${size[0]}px`
targetSubstitute.style.height = `${size[1]}px`
targetSubstitute.style.transform = `translateX(-30px)`
}
})
card.addEventListener('mouseleave', e => {
let targetSubstitute = card.querySelector('.lorem-card--substitute')
targetSubstitute.style.width = ''
targetSubstitute.style.height = ''
targetSubstitute.style.transform = ''
resetCardOverflow = setTimeout(() => {
card.style.overflow = ''
}, 200)
})
}
* {
box-sizing: border-box;
}
.cards-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: space-between;
}
.lorem-card {
position: relative;
flex-grow: 1;
max-width: 150px;
max-height: 200px;
margin: 15px;
overflow: hidden;
}
.lorem-card--real {
max-width: 150px;
max-height: 200px;
padding: 15px;
border: 3px solid #008CBA;
background: #FFF;
overflow: hidden;
}
.lorem-card--substitute {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 15px;
background: #FFF;
border: 3px solid #008CBA;
transition: all .2s ease;
overflow: hidden;
}
.lorem-card:hover .lorem-card--real {
opacity: 0;
}
.lorem-card:hover .lorem-card--substitute{
border: 3px solid red;
z-index: 1000;
}
<html>
<head>
<meta charset="utf-8">
<title>Cards demo</title>
<link rel="stylesheet" type="text/css" href="./cards.css">
</head>
<body>
</body>
<script src="./gen.js"></script>
</html>
In case you need the JS fiddle code: here

Flexbox text cutting off/not wrapping

I'm using flexbox to display a blockquote and author/avatar horizontal to each other. This is within a slideshow (flexslider) but that doesn't seem to be the reason for the problem.
This works ok until we hit IE10. It appears to work fine in Chrome, Firefox, Opera, Safari, Edge and IE11.
The problem I'm having is the text is cut off at the end of the quote. If you don't see this at first you may have to resize your viewport. This may be caused by the padding I have at each side of the text to allow space for the custom open/close quotation marks.
Another issue in IE10 is that when the text is long (see "James Hetfield Longname" on the first quote) it doesn't wrap. This could be related to my other issue as I guess the text isn't wrapping correctly then either.
Here's some links to an example. I've include a CodePen and also a stripped back version of my HTML template.
CodePen: http://codepen.io/moy/pen/XdLELV
Template: http://moymadethis.com/flex/quote.html
Really hope someone can help with this!
Here's the code, as it's making my add something (though I don't think this wall off CSS/HTML is particually helpful myself)!
EDIT: I should add that I use Autoprefixer to popular the extra flex prefixes.
HTML:
<div class="flexslider">
<ul class="slides">
<li>
<blockquote class="feature-quote">
<p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<footer class="feature-quote__cite">
<img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
<p><strong class="name">James Hetfield Hetfield</strong> Damage Inc.</p>
</footer>
</blockquote>
</li>
<li>
<blockquote class="feature-quote">
<p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<footer class="feature-quote__cite">
<img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
<p><strong class="name">James Hetfield</strong> Damage Inc.</p>
</footer>
</blockquote>
</li>
<li>
<blockquote class="feature-quote">
<p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<footer class="feature-quote__cite">
<img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
<p><strong class="name">James Hetfield</strong> Damage Inc.</p>
</footer>
</blockquote>
</li>
</ul>
</div>
CSS:
/* Base blockquote styles */
blockquote {
margin-bottom: $baseline*2;
overflow: hidden; // Fixes bug when inside flexslider when open/close quote-marks duplicate.
padding: $baseline $baseline 0 0;
p {
margin-bottom: $baseline/2;
}
> p {
color: $blue-light;
#include font-size(25);
line-height: $baselineheight/1.25;
font-weight: 300;
padding-left: 30px;
-webkit-font-smoothing: antialiased;
&:before,
&:after {
background: url(../img/content/quote-open.png) no-repeat 0 0;
content: "";
display: inline-block;
height: 24px;
margin: 0 10px 0 -30px;
position: relative;
top: -5px;
width: 21px;
}
&:after {
background: url(../img/content/quote-close.png) no-repeat 0 0;
margin: 5px 0 0 5px;
position: absolute;
top: auto;
}
}
footer {
padding-left: 30px;
}
.name {
color: $blue;
display: block;
text-transform: uppercase;
}
}
/* Feature (avatar) quotes */
.feature-quote {
margin-bottom: $baseline;
padding-top: 5px;
}
.feature-quote footer p {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.feature-quote__cite {
margin-top: $baseline;
}
.feature-quote__avatar {
border: 5px solid $blue-lighter;
border-radius: 100%;
display: inline-block;
height: 60px;
margin-right: $baseline/2;
width: 60px;
}
/* Above 768px (Feature quote side-by-side */
#media only screen and (min-width: 768px) {
blockquote {
margin: 0 25px $baseline*2;
}
.feature-quote {
display: flex;
}
.feature-quote__text {
order: 2;
width: 66.66666%;
}
.feature-quote__cite {
display: flex;
align-items: center;
justify-content: center;
order: 1;
margin-top: 0;
padding-right: 30px;
width: 33.33333%;
}
.feature-quote__avatar {
height: 80px;
width: 80px;
}
.no-flexbox {
.feature-quote {
margin: 0 auto $baseline;
max-width: 800px;
}
.feature-quote__text,
.feature-quote__cite {
text-align: center;
width: 100%;
}
.feature-quote__cite {
p {
text-align: left;
}
}
}
}

Expanding upon Pete's comment about IE10 not properly supporting flexbox.
http://caniuse.com/#search=flex
Regarding IE10:
Only supports the 2012 syntax
Need the -ms- prefix
This answer actually has lots of information about flex in IE10: https://stackoverflow.com/a/21306343/2117156

Note I'm using autoprefixer so all -ms- prefixes are generated automatically. I will just note the prefix-less declarations here.
Adding the following line onto the paragraph did the trick flex: 0 1 auto;
I also had an issue where the text wouldn't wrap in the .feature-quote__cite container. I tried adding the above which didn't work. To fix this I had to add flex: 0 1 auto; directly onto the paragraph within rather than on the parent container .feature-quote__cite. Not ideal but it looks like it's done the trick.
As an aside, in IE11 the avatar image would get squashed when there wasn't enough horizontal space. I found adding flex-shrink: 0; to the image fixed this.

How to add a hover effect with text

So I'm working on this site http://wiafe.github.io/Love-Nonprofits/index.html and near the bottom there are divs that hold messages. And I would like to add an hover effect that will display two buttons and a link over it. And everything I have tried has failed so checking to see if there is a way to do it. I took out the html portions I had and kept the css classes. Have been messing with it all day and it's breaking my brain right now.
HTML:
<div class="message">
<a class="message-content overlay">I<span class="heart"></span>working for a nonprofit because we care about more than our own cause. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,<br><span class="signature">Leaslie S.</span>
</a>
<a class="message-content overlay">I<span class="heart"></span>working for a nonprofit because we care about more than our own cause. <br><span class="signature">Leaslie S.</span>
</a>
</div>
CSS:
.message-content:hover {
text-decoration: none;
}
.message-content p {
color: rgba(255,255,255,1);
background: black;
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
padding: 10px;
line-height: 28px;
text-align: justify;
position: relative;
bottom: 0;
margin: 0;
height: 30px;
transition: height .5s;
-webkit-transition: height .5s;
-moz-transition: height .5s;
}
.message-content:hover small {
opacity: 0;
}
.message-content:hover .show-description p {
height: 100%;
}
.message-content .show-description small {
opacity: 1;
}
JS:
$('.message-content').hover(function() {
$(this).toggleClass('show-description');
});

Use this CSS:
.box > .appear {
opacity: 0;
transition: all 0.5s;
}
.box:hover > .appear {
opacity: 1;
}
Add class .appear to whatever you want to display on hover over .box.
JS Fiddle