Develop Reference

How to replace text with an image/icon when scaling to mobile?

I am newbie to this and can't find many specific answers. I am looking for a way to change text labels into images when the viewport is scaled down to mobile sizes. I have additional issues because I am doing so with Leaflet, a java script library for Open Street Maps. They organize things a little different and I have to inject my styling.
Here is my live page with icons: https://leksplay.com/playgroundmap (still working on my SSL cert).
My full inline styles are at the bottom. I have a couple of things going on here.
I am styling the input directly because Leaflet inserts a div between label and input not allowing me to trigger animation on the label based on "checked" input states.
I am injecting a class into my labels through javascript. Leaflet allows this, example:
var overlayMaps = {
"All Playgrounds": dummy[0],
"<img class='icons' src='https://static.tildacdn.com/tild6162-6637-4663-b262-356661343562/IconsMedium_WC.png' alt='Restrooms'>": dummy[1],
"<img class='icons' src='https://static.tildacdn.com/tild6238-6432-4162-a161-333539326537/IconsMedium_Grill.png' alt='Public grills'>": dummy[2],
"<img class='icons' src='https://static.tildacdn.com/tild3939-3338-4237-b732-346131313435/IconsMedium_Access.png' alt='Accessible equipment'>": dummy[3],
"<img class='icons' src='https://static.tildacdn.com/tild3634-3833-4338-b834-626437613735/IconsMedium_Indoor.png' alt='Indoor area'>": dummy[4],
"<img class='icons' src='https://static.tildacdn.com/tild3331-3632-4239-a333-343137356133/IconsMedium_Full_Fen.png' alt='Fully fenced'>": dummy[5],
"<img class='icons' src='https://static.tildacdn.com/tild3339-3038-4032-a638-626137393039/IconsMedium_Partial_.png' alt='Partially fenced'>": dummy[6],
"<img class='icons' src='https://static.tildacdn.com/tild3336-3333-4137-a562-346663633031/IconsMedium_Horse.png' alt='Animals'>": dummy[7],
"<img class='icons' src='https://static.tildacdn.com/tild3332-6230-4731-a138-373630383130/IconsMedium_Water.png' alt='Pool or beach'>": dummy[8],
"<img class='icons' src='https://static.tildacdn.com/tild3761-3935-4338-b861-336231626433/IconsMedium_Toddler.png' alt='Toddler Area'>": dummy[9]
};
I am also having some issues with my flex container on smaller screens because of margins I can't manage to fix. On mobile there is too much space on the left and right side causing the container to only have two columns when clearly there is space for 3 or 4. Example:
photo of current mobile view
I am sure there is a way, maybe with jQuery (which I dont know), to either fix the flex container on mobile or simply transition from text only on desktop to icons when on a smaller screen. Here is a live example of the text only version: https://leksplay.com/test-and
My end goal is to find a way that can display my control box (filters) on mobile without the browser creating an overflow scroll box or making the user scroll needlessly far to get to the actual map.
Any help is appreciated.
<div class="flexcontainer">
<div id="new-parent">
</div>
</div>
<script>// Create the control and add it to the map;
var control = L.control.layers(null, overlayMaps,{collapsed:false});
control.addTo(map);
// Call the getContainer routine.
var htmlObject = control.getContainer();
// Get the desired parent node.
var a = document.getElementById('new-parent');
// Finally append that node to the new parent.
function setParent(el, newParent)
{
newParent.appendChild(el);
}
setParent(htmlObject, a);
</script>
<style>
*, *::before, *::after {
box-sizing: border-box;
vertical-align: middle;
}
body {
color: #435757;
background: radial-gradient(#fff, #dac4cd);
font: min(3vw, 16px) 'Montserrat';
justify-content: center;
align-items: center;
flex-direction: column;
}
label:first-of-type {
border: 3px solid #689c93;
margin: min(1vw,10px) 75%;
flex: 0 0 30%;
border-radius: 100px;
}
label {
display: block;
position: relative;
padding: min(.5vw, 5px) min(3vw, 15px) min(.5vw, 5px) min(.5vw, 5px);
color: #000;
background-color: transparent;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: background-color .2s, box-shadow .2s;
flex: 0 0 20%;
border-radius: 100px;
}
.flexcontainer {
display: flex !important;
flex-wrap: wrap;
}
.icons {
width: 70px;
}
#new-parent {
position: relative;
}
</style>
<style>
.leaflet-control-layers-selector {
--primary: #679C92;
--secondary: #E0E0E0;
--duration: 0.5s;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-mask-image: -webkit-radial-gradient(white, black);
outline: none;
cursor: pointer;
position: relative;
overflow: hidden;
transform-style: preserve-3d;
perspective: 240px;
border-radius: 50%;
width: min(3.5vw, 25px);
height: min(3.5vw, 25px);
background-size: 300% 300%;
transition: transform 0.3s;
transform: translate(0vw, 0vw);
transform-origin: center center;
animation: var(--name, unchecked) var(--duration) ease forwards;
}
.leaflet-control-layers-selector:before, .leaflet-control-layers-selector:after {
content: '';
position: absolute;
height: var(--height, 13px);
left: 3px;
top: var(--top, 3px);
background: var(--background, var(--primary));
animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;
}
.leaflet-control-layers-selector:before {
clip-path: polygon(0 0%);
}
.leaflet-control-layers-selector:active {
--scale: 0.95;
}
.leaflet-control-layers-selector:checked {
--name: checked;
--name-icon-b: checked-icon;
--name-icon-a: unchecked-icon;
}
#keyframes checked-icon {
from {
transform: translateZ(12px);
}
to {
transform: translateX(16px) rotateY(90deg) translateZ(12px);
}
}
#keyframes unchecked-icon {
from {
transform: translateX(-16px) rotateY(-90deg) translateZ(12px);
}
to {
transform: translateZ(12px);
}
}
#keyframes checked {
from {
background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
background-position: 100% 50%;
}
to {
background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
background-position: 50% 50%;
}
}
#keyframes unchecked {
from {
background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
background-position: 100% 50%;
}
to {
background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
background-position: 50% 50%;
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
</style>
<style>
.leaflet-control-layers-expanded {
padding: 0px 0px 0px 0px !important;
background: transparent !important;
}
.leaflet-control-layers {
box-shadow: 0 0px 0px rgba(0,0,0,00) !important;
background: transparent !important;
border-radius: 0px !important;
}
.leaflet-control-layers-overlays {
display: flex !important;
position:unset;
justify-content: center;
flex-wrap: wrap;
flex-basis: unset;
align-items: center;
width: 75%;
margin: 0px 12.5% 0px 12.5%;
align: center;
}
</style>

Here is the solution:
Step 1: hide the text when the browser size is less than 991px or in mobile screens which have size less than 991px;
Step 2: set a background image.
#media all and (max-width:991px){
#tst1{
background-image:url('https://static.tildacdn.com/tild6162-6637-4663-b262-356661343562/IconsMedium_WC.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst2{
background-image:url('https://static.tildacdn.com/tild6238-6432-4162-a161-333539326537/IconsMedium_Grill.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst3{
background-image:url('https://static.tildacdn.com/tild3939-3338-4237-b732-346131313435/IconsMedium_Access.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst4{
background-image:url('https://static.tildacdn.com/tild3634-3833-4338-b834-626437613735/IconsMedium_Indoor.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst5{
background-image:url('https://static.tildacdn.com/tild3331-3632-4239-a333-343137356133/IconsMedium_Full_Fen.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst6{
background-image:url('https://static.tildacdn.com/tild3339-3038-4032-a638-626137393039/IconsMedium_Partial_.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst7{
background-image:url('https://static.tildacdn.com/tild3336-3333-4137-a562-346663633031/IconsMedium_Horse.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst8{
background-image:url('https://static.tildacdn.com/tild3332-6230-4731-a138-373630383130/IconsMedium_Water.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst9{
background-image:url('https://static.tildacdn.com/tild3761-3935-4338-b861-336231626433/IconsMedium_Toddler.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
}
<span id="tst1">Restrooms</span>
<span id="tst2">Public grills</span>
<span id="tst3">Accessible equipment</span>
<span id="tst4">Indoor area</span>
<span id="tst5">Fully fenced</span>
<span id="tst6">Partially fenced</span>
<span id="tst7">Animals</span>
<span id="tst8">Pool or beach</span>
<span id="tst9">Toddler Area</span>
I have done little modification to your code to make things working.Please run it full screen and reduce the browser's size to see the changes.
Also, replace the areas of your code with this code and apply css.I have taken 991px as breakpoint, but you can take breakpoint of your choice.

JQuery rotation forward and backward animation

I am trying to make plus to cross toggle button. Ive already created a transforming forward animation with transition but i cant figure out how to make slight transition to backwards. Thanks in advance!
Here is my code snippets.
<div class="tog-holder" id="tog"></div>
<div class="anim" id="anim">
<p>blabla</p>
</div>
.tog-holder{
position:relative;
width:32px;
height:32px;
padding:15px 0;
cursor: pointer;
border-radius: 50%;
background: url(https://rscua.com/wp-content/uploads/2020/05/plus_icon-icons.com_69322.png);
background-size: cover;
}
.animaterotate {
transform: rotate(45deg);
transition:all .2s ease-in-out;
}
jQuery(document).ready(function(){
jQuery(".anim").hide();
jQuery(".tog-holder").click(function(){
jQuery(this).toggleClass('animaterotate');
jQuery(this).next(".anim").slideToggle();
});
});
A snippit to work with:
jQuery(document).ready(function() {
jQuery(".anim").hide();
jQuery(".tog-holder").click(function() {
jQuery(this).toggleClass('animaterotate');
jQuery(this).next(".anim").slideToggle();
});
});
.tog-holder {
position: relative;
width: 32px;
height: 32px;
padding: 15px 0;
cursor: pointer;
border-radius: 50%;
background: url(https://rscua.com/wp-content/uploads/2020/05/plus_icon-icons.com_69322.png);
background-size: cover;
}
.animaterotate {
transform: rotate(45deg);
transition: all .2s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tog-holder" id="tog"></div>
<div class="anim" id="anim">
<p>blabla</p>
</div>

I made a small change on your css and jquery code.
Therefore, I used "hasClass" to check the state of the rotation without really using the 'animaterotate' for css directly.
NEW VERSION:
jQuery(document).ready(function() {
jQuery(".anim").hide();
jQuery(".tog-holder").click(function() {
if(!jQuery(this).hasClass('animaterotate'))
jQuery(this).css("transform", "rotate(45deg)");
else
jQuery(this).css("transform", "rotate(0deg)");
jQuery(this).toggleClass('animaterotate');
jQuery(this).next(".anim").slideToggle();
});
});
.tog-holder {
position: relative;
width: 32px;
height: 32px;
padding: 15px 0;
cursor: pointer;
border-radius: 50%;
background: url(https://rscua.com/wp-content/uploads/2020/05/plus_icon-icons.com_69322.png);
background-size: cover;
transition: all .2s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tog-holder" id="tog"></div>
<div class="anim" id="anim">
<p>blabla</p>
</div>
OLD VERSION:
jQuery(document).ready(function() {
jQuery(".anim").hide();
jQuery(".tog-holder").click(function() {
if(!jQuery(this).hasClass('animaterotate'))
{
jQuery(this).css("transform", "rotate(45deg)");
}
else
{
jQuery(this).css("transform", "rotate(0deg)");
}
jQuery(this).css("transition", "all .2s ease-in-out");
jQuery(this).toggleClass('animaterotate');
jQuery(this).next(".anim").slideToggle();
});
});
.tog-holder {
position: relative;
width: 32px;
height: 32px;
padding: 15px 0;
cursor: pointer;
border-radius: 50%;
background: url(https://rscua.com/wp-content/uploads/2020/05/plus_icon-icons.com_69322.png);
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tog-holder" id="tog"></div>
<div class="anim" id="anim">
<p>blabla</p>
</div>

I added another class while going back.
jQuery(".anim").hide();
jQuery(".tog-holder").click(function(){
jQuery(this).toggleClass('animaterotate');
if(!jQuery(this).hasClass('animaterotate')) {
jQuery(this).addClass('animaterotate2');
}
else {
jQuery(this).removeClass('animaterotate2');
}
jQuery(this).next(".anim").slideToggle('2000');
});
.animaterotate2 {
transform: rotate(0deg);
transition:all .2s ease-in-out;
}

Centering a div on a page with an overlay

I've recently begun to learn HTML, CSS, JavaScript, and jQuery from this set of books.
I've tried every obvious answer I could dig up on Stack Overflow to do what is normally the very simple task of centering a div on a page. My particular page has an overlay, which I suspect is part of my problem. I'm working to adapt a CodePen to my project. In this CodePen, only one element, an H1 tag, needs to be centered on a page and it works fine.
On my page, I'm replacing a h1 tag with a div. I've included a link to jsFiddle with comments re: what I've tried to do. I know I'm missing something really simple, but I'm unable to figure out what it is.
Thank you for reading and I welcome your suggestions for this front-end noob.
Below is my problematic code:
<!DOCTYPE html>
<body>
<header>
<div class="hero" id="Portfolio">
<div class="overlay"></div>
<div class="page-subject">
<!-- Rather than a vanilla h1 tag following the div.overlay, I wrapped the h1 tag in a div called div.page-subject. I can't get this div to center -->
<h1>Portfolio</h1>
<div class="container space-around">
<div><img src="../images/icons/apple-app-store-128.png" alt="iOS Applications"></div>
<div><img src="../images/icons/amazon-echo-128.png" alt="Amazon Alexa Skills"></div>
</div>
</div>
</div>
</header>
html, body {
height:100%;
padding:0;
margin:0;
font-family: Raleway,sans-serif;
color:#FFF;
}
header {
height: calc(100% - 65px);
background:#333;
-webkit-perspective: 1500px;
perspective: 1500px;
perspective-origin: center bottom;
}
h1 {
margin:0;
vertical-align: middle;
text-align:center;
font-size:80px;
font-weight:600;
text-transform:none;
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
.hero#Portfolio {
position:relative;
background:#333 url(https://wallpaperscraft.com/image/surface_gray_dark_light_shadow_18440_2560x1600.jpg) no-repeat center center;
background-size:cover;
height: 100%;
width:100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display:table;
}
.hero .overlay {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
opacity:0;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
div.page-subject {
vertical-align: middle;
}
.container {
display: flex;
}
.container.space-around {
z-index: 10;
justify-content: space-around;
padding-bottom: 10px;
}
a {
position: relative;
z-index: 1;
}
a.hvr-pop img {
background: white;
border-radius: 25px;
display: block;
min-width: 64px;
max-width:128px;
min-height: 64px;
max-height:128px;
width: auto;
height: auto;
}
/* Pop */
#-webkit-keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
/*Does button animation from hover.css class*/
.hvr-pop {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
-webkit-animation-name: hvr-pop;
animation-name: hvr-pop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
'use strict';
// This creates to folding animation
$(window).scroll(function() {
var heroHeight = $('header').height();
var yPosition = $(document).scrollTop();
if (yPosition <= heroHeight) {
var effectFactor = yPosition / heroHeight;
var rotation = effectFactor * (Math.PI / 2 - Math.asin( (heroHeight - yPosition) / heroHeight ));
$('.hero').css({
'-webkit-transform': 'rotateX('+rotation+'rad)',
'transform': 'rotateX('+rotation+'rad)',
})
.find('.overlay').css('opacity', effectFactor);
}
/**
* Sticky nav-bar
*/
if (yPosition <= heroHeight) {
$('nav').removeClass('fixed');
} else {
$('nav').addClass('fixed');
}
});
$(document).ready( function () {
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$("nav ul a.current").removeClass("current");
$("nav ul a[href='" + pathname + "']").addClass("current");
});

Just add this:
div.page-subject {
vertical-align: middle;
display: table-cell;
}
Here is Fiddle.

How about this.
Use div.page-subject instead of the tag and use
div.page-subject {
vertical-align: middle;
display: inline-block;
width: 100%;
text-align: center;
font-size: 1.2rem;
margin: 1rem 0;
}

Centering things horizontally is easy.
display: block;
margin: auto;
position: relative, absolute, or fixed depending...
Centering thing vertically takes more work and I always do it this way.
top: 50%;
transform: translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;
However you can also do it all with transforms
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;
If using transforms don't forget to use vendor prefixes.
I use this auto prefixer: http://pleeease.io/play/

Try this
.hero{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

to center a div horizontally try to use this one
/* lets say its width is 500px */
.hero{
width:500px;
display:block;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
}
if you wanted to make it center both vertically and horizontally then you must have to set its position to absolute like this one,
.hero {
width:500px;
height:500px;
position:absolute;
left:50%; /* centers horizontally on the screen */
top:50%; /* centers vertically on the screen */
background-repeat:no-repeat;
background-position:center;
margin:-250px 0 0 -250px; /* is width and height divided by two */
background:#FFFFFF;
}
You have to set overlay element as a parent of a .hero element and overlay element should be like this one,
.overlay {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
z-index:9999; /* makes sure it stays on top */}

Transition between CSS background images

In my site I have a switch between a down arrow & and an up arrow. See here: http://jsfiddle.net/4uLghzg7/
Is there a way I can add a slight animation transition when clicked? So it fades in/out between the two icons?
function close_accordion_section(source) {
$(source).parent().find('.accordion-section-title').removeClass('active');
$(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function (e) {
if ($(e.target).is('.active')) {
close_accordion_section(e.target);
} else {
$(this).addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
e.preventDefault();
});
.accordion {
overflow: hidden;
margin-bottom: 40px;
}
.accordion-section {
padding: 15px;
border: 1px solid #d8d8d8;
background: #fbfbfb;
}
.accordion-section-title {
width: 100%;
display: inline-block;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: top right;
}
.accordion-section-title.active {
background: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png") top right no-repeat;
background-size: 5% 100%;
background-repeat: no-repeat;
}
.accordion-section-title.active, .accordion-section-title:hover {
text-decoration: none;
transition: color 0.1s linear;
}
.accordion-section-content {
padding: 15px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a>
<div id="accordion-1" class="accordion-section-content">
<p>Text.</p>
<p>
</div>
</div>
</div>

You need a special trick to fade between background-images, you will need two elements, and fade the inner elements opacity:
<div id="arrowUp">
<div id="arrowDown">
</div>
</div>
Demo of your code (modified):
function close_accordion_section(source) {
$(source).parent().find('.arrowDown').removeClass('active');
$(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
if ($('.arrowDown').is('.active')) {
close_accordion_section(e.target);
} else {
$('.arrowDown').addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
e.preventDefault();
});
.accordion {
overflow: hidden;
margin-bottom: 40px;
}
.accordion-section {
padding: 15px;
border: 1px solid #d8d8d8;
background: #fbfbfb;
}
.arrowUp {
width: 20px;
height: 20px;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.arrowDown {
opacity: 0;
width: 20px;
height: 20px;
background-color: white;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png");
background-size: 100%;
background-repeat: no-repeat;
-webkit-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.arrowDown.active {
opacity: 1;
background-position: center center;
-webkit-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.accordion-section-title.active,
.accordion-section-title:hover {
text-decoration: none;
transition: color 0.1s linear;
}
.accordion-section-content {
padding: 15px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">More information</a>
<div class="arrowUp" style="float: right">
<div class="arrowDown">
</div>
</div>
<div id="accordion-1" class="accordion-section-content">
<p>Text.</p>
<p>
</div>
</div>
</div>

you can't actually do much animation on raster background images but if css 3 transition is acceptable you can try something like
.fade-background{
transition: background 1s cubic-bezier(0.55, 0.06, 0.68, 0.19) !important;
}
I added a class "fade-background" on your anchor tag, fiddle here
http://jsfiddle.net/dango_x_daikazoku/4uLghzg7/5/

just write .click function in
$(function() {
});
Try this..
$(function() {
$('.accordion-section-title').click(function (e) {
e.preventDefault();
if ($(e.target).is('.active')) {
close_accordion_section(e.target);
} else {
$(this).addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
});
});

You could change the arrows to be actual elements (pseudo elements in the following example) and put them on top of each other. Then have the down arrow fade in/out on top of the up arrow to create the effect you're looking for.
// up arrow positioned absolutely
.accordion-section-title:before {
content: '';
position: absolute;
}
// down arrow positioned absolutely
.accordion-section-title:after {
content: '';
opacity: 0;
transition: opacity 0.2s ease;
position: absolute;
}
// animate in down arrow
.accordion-section-title:after {
content: '';
opacity: 1;
position: absolute;
}
jsfiddle working example: http://jsfiddle.net/4uLghzg7/6/
Hopefully this answers what you were asking about.

Content of div should be at their initial position after mouse remove

Here it is a code pen URL. I want content at the initial position after mouse remove from <div> Rather than one single <div> I have 6 different <div> 3 in one row. The transform should be same on every <div>.

Remove Style Attr
$(".card").on("mouseleave",function(e) {
card.removeAttr('style')
});
LINK

Tried an animated reverting on mouse leave.
http://codepen.io/anon/pen/raQWLO?editors=110
// why it doesn't work on firefox?
var card = $(".card");
$(".card").on("mousemove",function(e) {
var ax = -($(window).innerWidth()/2- e.pageX)/20;
var ay = ($(window).innerHeight()/2- e.pageY)/10;
card.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)");
});
$(".card").on("mouseleave",function(e) {
card.attr("style", "transform: rotateY("+0+"deg) rotateX("+0+"deg);-webkit-transform: rotateY("+0+"deg) rotateX("+0+"deg);-moz-transform: rotateY("+0+"deg) rotateX("+0+"deg);-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;");
});
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700);
body{
background: #edf2f4;
perspective: 1000px;
transform-style: preserve-3d;
display: flex;
height: 100vh;
font-family: "Playfair Display",georgia,serif;
}
.card{
//pointer-events: none;
transform: translateZ(0);
padding: 30px;
background: white;
border-radius: 5px;
width: 400px;
height: 200px;
margin: auto;
transform-style: preserve-3d;
backface-visibility: hidden;
display: flex;
box-shadow: 0 0 5px rgba(0,0,0,.1);
//position: relative;
&:after{
content:" ";
position: absolute;
width: 100%;
height: 10px;
border-radius: 50%;
left:0;
bottom:-50px;
box-shadow: 0 30px 20px rgba(0,0,0,.3);
}
.card-content{
margin: auto;
text-align:center;
transform-style: preserve-3d;
}
h1{
transform: translateZ(100px);
}
p{
transform: translateZ(50px);
display: block;
&.related{
transform: translateZ(80px);
font-style: italic;
}
}
a{
color:#69c6b8;
pointer-events: auto;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
<div class="card-content">
<h1>Just hover around</h1>
<p><small>by Ariona, Rian</small></p>
<p class="related"><strong>See also: </strong>Animated highlight text</p>
</div>
</div>