I am trying to figure out how I can write a CSS animation that allows an image (id: slam) to suddenly appear on screen and cover all of the content without displacing any of the text. So far, this is what I have:
HTML:
body{
height: 100%;
}
div{
overflow: auto;
text-align: center;
}
#-webkit-keyframes slam-animation {
0% {
opacity: 0;
-webkit-transform: scale(10);
}
100% {
opacity: 1;
-webkit-transform: rotate(-30deg) scale(1);
}
}
#slam {
-webkit-animation-name: slam-animation;
-webkit-animation-duration: 1s;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
<body>
<img id="slam" src="assets/images/Undesirable.jpg" alt = "undesirable">
<header>
<h1>Text</h1>
</header>
<div class="main_game">
<p>Stuff</p>
<div class = "col-xs-2">
</div>
<div class = "left_box col-xs-4">
<p>Stuff</p>
</div>
<div class = "right_box col-xs-4">
<p>Stuff</p>
</div>
<div class = "col-xs-2">
</div>
</div>
</body>
Use position:absolute to your image.
Using absolute position the element is removed from the normal document flow; no space is created for the element in the page layout i.e. it will not affect the position of other elements.
Reference Link to understand position absolute
Stack Snippet
body {
height: 100%;
}
.main_game div {
text-align: center;
}
.main {
position: relative;
}
#-webkit-keyframes slam-animation {
0% {
opacity: 0;
-webkit-transform: scale(10);
}
100% {
opacity: 1;
-webkit-transform: rotate(-30deg) scale(1);
}
}
img#slam {
position: absolute;
top: 0;
left: 0;
}
#slam {
-webkit-animation-name: slam-animation;
-webkit-animation-duration: 1s;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
<div class="main">
<img id="slam" src="http://via.placeholder.com/350x350" alt="undesirable">
<header>
<h1>Text</h1>
</header>
<div class="main_game">
<p>Stuff</p>
<div class="col-xs-2">
</div>
<div class="left_box col-xs-4">
<p>Stuff</p>
</div>
<div class="right_box col-xs-4">
<p>Stuff</p>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
Related
I have card items in html.
As you see there are 8 card items. What I am trying to achieve is I want to add a keyframe to move that from right to left and when I hover over one of the card items, I want it to stop. Since I want it continuously like a chain turn over and over, I couldn't figure out how to do it. Can I achieve this only with css?
.card {
list-style: none;
position: relative;
filter: brightness(0.9) saturate(0);
}
.card:before {
content: "";
display: block;
padding-bottom: 150%;
width: 100%;
}
.card-background {
background-size: cover;
background-position: center;
border-radius: 24px;
bottom: 0;
filter: brightness(0.75) saturate(1.2) contrast(0.85);
left: 0;
position: absolute;
right: 0;
top: 0;
transform-origin: center;
trsnsform: scale(1) translateZ(0);
transition: filter 200ms linear, transform 200ms linear;
}
.card:hover {
filter: unset;
}
.card:hover .card-background {
transform: scale(1.05) translateZ(0);
cursor: pointer;
}
<div class="row">
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1557177324-56c542165309?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1557177324-56c542165309?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1557177324-56c542165309?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1557187666-4fd70cf76254?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1556680262-9990363a3e6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1556680262-9990363a3e6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)">
</div>
</div>
</div>
<div class="col-md-2">
<div class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)">
</div>
</div>
</div>
</div>
But I didnt add my keyframe because I dont know how can I make it. Literally, I am trying to achieve full turn, like when it goes out from the window something else should come infinitely.
Use this in your css file.
.card {
list-style: none;
position: relative;
filter: brightness(0.9) saturate(0);
width: 10%;
animation: lefttoright 5s linear 2s infinite alternate; //name duration timing-function delay count direction
}
#keyframes lefttoright {
0%{
left: 0;
}
50%{
left: 50%;
}
100%{
left: 0;
}
}
.card:hover {
filter: unset;
animation-play-state: paused; //stop animation when hover on each item
}
It's done.
I have a row of pictures where I want to fade in one image after another.
.jumbotron > div > div picture > img{
animation: fadein 6s;
-moz-animation: fadein 6s; /* Firefox */
-webkit-animation: fadein 6s; /* Safari and Chrome */
-o-animation: fadein 6s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
This code let's all images fade in at the same time.
I'm using typo3 with a template, the html structure is a bit complicated because of this - I'm sorry.
<section class="jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="c1170" class="">
<div class="row">
<div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12">
<div class=" ">
<div id="c1163" class="">
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-xs-6">
<div class=" ">
<div id="c1164" class="">
<div class="ce-textpic ce-left ce-above">
<div class="" >
<div class="row">
<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
<div class="ce-media">
<picture alt="Geigen3D_m_02.gif">
<video style="display: none;"><![endif]-->
<![CDATA[ orig Width: 123px ]]>
<![CDATA[ xs scale: 0.5, 544px, max: 272px]]>
<source srcset="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif" media="(max-width: 544px)">
<![CDATA[ sm scale: 0.5, 768px, max: 384px]]>
<source srcset="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif" media="(max-width: 768px)">
<![CDATA[ md scale: 0.125, 992px, max: 124px]]>
<source srcset="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif" media="(max-width: 992px)">
<![CDATA[ lg scale: 0.125, 1200px, max: 150px]]>
<source srcset="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif" media="(min-width: 992px)">
</video><![endif]-->
<img src="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif"
alt="Geigen3D_m_02.gif "
title=""
class="img-fluid m-b-1 " />
</picture>
</div>
</div>
<div class="clearfix hidden-sm-up"></div>
<div class="hidden-xs-down clearfix hidden-md-up"></div>
<div class="hidden-sm-down clearfix hidden-lg-up"></div>
<div class="hidden-md-down clearfix hidden-xl-up"></div>
<div class="hidden-lg-down clearfix"></div>
</div>
</div>
<div class="ce-bodytext">
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-xs-6">
<div class=" ">
<div id="c1165" class="">
<div class="ce-textpic ce-left ce-above">
<div class="" >
<div class="row">
<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
<div class="ce-media">
<!--next picture begins-->
<picture alt="image.gif">
and so on, and so on...
All solutions are welcome (pure css solution would be great tho), thank you for reading!
Here's a CSS-only solution using an approach similar to what you're starting with. I've simplified the HTML and CSS to focus on the important parts.
The General Idea
Layout your images as you desire. In this case I've used a <ul> element with <li> elements to hold the images, and laid them out horizontally.
Add a fadeIn animation to the images.
Now here's the key, add a animation-delay for each image, dependent on it's number in the lineup. The first will have no delay. The 2nd, a 3 second delay. The 3rd, a 6 second delay, and so on. This timing comes from the animation-duration of 3s. After the first image has faded in, the 2nd will fade in. After the 2nd has faded in, the 3rd will fade in, etc, etc.
Unknown Number of Images?
If the number of images is unknown this approach can still be used, though it will mean creating a few CSS styles that may never be used. You'll need to create:
li:nth-child(N) > img {
animation-delay: [animation-duration * N]s;
}
for the maximum number of images you think you'll have. So if you might have 100 images, and the animation-duration is set to 3s, you'll create 100 of those snippets, all the way through:
li:nth-child(100) > img {
animation-delay: 300s;
}
Demo
ul {
position: relative;
width: 100%
}
li {
float: left;
width: 25%;
}
img {
width: 100%;
opacity: 0;
animation-name: fadeIn;
animation-duration: 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
li:nth-child(2) > img {
animation-delay: 3s;
}
li:nth-child(3) > img {
animation-delay: 6s;
}
li:nth-child(4) > img {
animation-delay: 9s;
}
li:nth-child(5) > img {
animation-delay: 12s;
}
li:nth-child(6) > img {
animation-delay: 15s;
}
li:nth-child(7) > img {
animation-delay: 18s;
}
li:nth-child(8) > img {
animation-delay:21s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<ul>
<li><img src="http://placehold.it/400?text=1" /></li>
<li><img src="http://placehold.it/400?text=2" /></li>
<li><img src="http://placehold.it/400?text=3" /></li>
<li><img src="http://placehold.it/400?text=4" /></li>
<li><img src="http://placehold.it/400?text=5" /></li>
<li><img src="http://placehold.it/400?text=6" /></li>
<li><img src="http://placehold.it/400?text=7" /></li>
<li><img src="http://placehold.it/400?text=8" /></li>
</ul>
Here's the same demo on Codepen.
My proposal is to add an animation delay to every img (div in my example) increasingly. divs start with opacity:0; , attached in a class in this case, then we need some JavaScript to remove that opacity property once the animation has finished.
$('div').on('animationend', function() {
$(this).removeClass('initial');
})
.initial {
opacity: 0;
}
div {
width: 100px;
height: 100px;
background: pink;
border: 1px solid;
float: left;
animation: fadein 6s;
-moz-animation: fadein 6s;
/* Firefox */
-webkit-animation: fadein 6s;
/* Safari and Chrome */
-o-animation: fadein 6s;
/* Opera */
}
div:nth-child(1) {
animation-delay: 0s;
}
div:nth-child(2) {
animation-delay: 6s;
}
div:nth-child(3) {
animation-delay: 12s;
}
div:nth-child(4) {
animation-delay: 18s;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="initial"></div>
<div class="initial"></div>
<div class="initial"></div>
<div class="initial"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am making a website for a friend but since I'm still a beginner at this I'm not sure how to proceed. I'm making a simple intro page with his name and an enter button. The enter button has a hover function that when you hover your mouse over it it changes color, meanwhile I have a background div loop that iterates through 5 different backgrounds. My button and its hover function work fine on the first background picture, but once it changes the hover function no longer works until it comes back to that very first picture.
The background changing is a css code I found here on stack while I made everything else.
Here's My Code with what I'm working with.
Any ideas why the button hover isn't working on all the backgrounds?
HTML
<body class="intro-body">
<div id="background-change">
<div class="background-image image1">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
<div class="background-image image2">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
<div class="background-image image3">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
<div class="background-image image4">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
<div class="background-image image5">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
</div>
</body>
CSS
.intro-body {
text-align: center;
background-repeat: no-repeat;
background-position: center;
}
.intro-title {
padding-top: 20vh;
padding-bottom: 5vh;
font-size: 650%;
text-transform: uppercase;
text-align: center;
color: white;
letter-spacing: 5px;
text-shadow: 2px 2px black;
}
.intro-button {
border: solid;
color: white;
padding: 20px 45px;
display: inline-block;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
p.intro-button-hover:hover {
background-color: white;
opacity: 0.85;
padding: 23px 48px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
color: black;
border: unset;
cursor: pointer;
}
.background-image {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.image1{
background: url("http://placekitten.com/1200/1200") no-repeat center fixed;
}
.image2{
background: url("http://placekitten.com/1200/1300") no-repeat center fixed;
}
.image3{
background: url("http://placekitten.com/1300/1200") no-repeat center fixed;
}
.image4{
background: url("http://placekitten.com/1300/1300") no-repeat center fixed;
}
.image5{
background: url("http://placekitten.com/1300/1400") no-repeat center fixed;
}
#keyframes backgroundchangeFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes backgroundchangeFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#background-change div:nth-of-type(1) {
animation-delay: 20s;
-webkit-animation-delay: 20s;
}
#background-change div:nth-of-type(2) {
animation-delay: 15s;
-webkit-animation-delay: 15s;
}
#background-change div:nth-of-type(3) {
animation-delay: 10s;
-webkit-animation-delay: 10s;
}
#background-change div:nth-of-type(4) {
animation-delay: 5s;
-webkit-animation-delay: 5s;
}
#background-change div:nth-of-type(5) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
#background-change div {
animation-name: backgroundchangeFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 25s;
-webkit-animation-name: backgroundchangeFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 25s;
}
Just update with the following code, I have just added internal js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "white");
});
$("p").mouseout(function(){
$("p").css("background-color", "");
$("p").css("color", "black");
});
});
And remove the properties with '//' in the css:
p.intro-button-hover:hover {
// background-color: #fff;
//opacity: 0.4;
padding: 23px 48px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
//color: black;
border: unset;
cursor: pointer;
}
Quickly looking at this, the reason for it is that you actually have 5 different buttons fading in and out, which messes things up.
Do something like this (pseudocode)
<body class="intro-body">
<div id="callout">
<h1 class="intro-title">Name Here</h1>
<button class="intro-button intro-button-hover">Enter</button>
</div>
<div id="background-change">
<div class="background-image image1"></div>
<div class="background-image image2"></div>
<div class="background-image image3"></div>
<div class="background-image image4"></div>
<div class="background-image image5"></div>
</div>
</body>
Naturally position the callout section over the background image and you're good to go.
I have gone through your code and tried debugging the problem. The problem is mostly from your animation code. Try rewriting your animation code. I have tested it removing the animation code, to check if the hover is working properly or not, and it works fine. There is also a bug with your animation code which makes the Enter button disappear for a while after the first animation iteration and appear again after few seconds.
If possible try using JQuery, as it makes your job easier for using animations. For example, can simply use fadeIn(); and fadeOut(); functions for the animation you have been doing in your CSS animation code.
From the first answer for this question.
I have a div that need to have an absolute position but the problem is that I have a responsive website and I want this div to be automatically placed in a row.
Some code:
<div class="row">
<h2 class="page-header" > animation:</h2>
</div>
<div class="row"> <!--THIS SHOULD BE JUST AFTER THE PREVIOUS DIV -->
<div class="fadein"> <!-- THIS DIV HAVE AN OBSOLUTE POSITION -->
<img id="f3" src="http://i.imgur.com/R7A9JXc.png">
<img id="f2" src="http://i.imgur.com/D5yaJeW.png">
<img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>
</div>
Any suggestion ?
Issue Explaination:
If your looking for positioning to your elements. Simply you need to add position: relative; your row class and need to adjust the margin also.
More Information: CSS Positions
I'm providing you demo can check it once.
DEMO CODE:
h1,h2,h3,h4,h5,h6 {
text-align: center;
margin: 0;
padding: 0;
}
.row {
position: relative;
margin-bottom: 20px;
}
.fadein {
position:absolute;
top:0px;
left:50%;
margin:auto;
}
.fadein img {
position:absolute;
left:-65px;
top:0;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 6s;
}
#-webkit-keyframes fade {
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
#keyframes fade {
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
#f1 {
background-color: lightblue;
}
#f2 {
-webkit-animation-delay: -4s;
background-color: yellow;
}
#f3 {
-webkit-animation-delay: -2s;
background-color: lightgreen;
}
<div class="row">
<h2 class="page-header" > animation:
</h2>
</div>
<div class="row">
<!--THIS SHOULD BE JUST AFTER THE PREVIOUS DIV -->
<div class="fadein">
<!-- THIS DIV HAVE AN OBSOLUTE POSITION -->
<img id="f3" src="http://i.imgur.com/R7A9JXc.png">
<img id="f2" src="http://i.imgur.com/D5yaJeW.png">
<img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>
</div>
<div class="row">
<!--THIS SHOULD BE JUST AFTER THE PREVIOUS DIV -->
<div class="fadein">
<!-- THIS DIV HAVE AN OBSOLUTE POSITION -->
<img id="f3" src="http://i.imgur.com/R7A9JXc.png">
<img id="f2" src="http://i.imgur.com/D5yaJeW.png">
<img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>
</div>
I have 3 boxes within a fluid container.
Each box has a heading title, an icon and some text below.
On :hover I want the icon to move to the top of the <div> and change it's size, I have managed to "achieve" it but using certain number of pixels.
That will not work in mobile resolutions if the title text is longer and takes 2 lines.
Here is what I have done so far:
Fiddle here
HTML
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollIn">
<div class="service-box">
<h2>Title</h2>
<i class="fa fa-5x fa-paper-plane wow bounceIn market-icon" data-wow-delay=".1s"></i>
<p class="">Certain text below the icon</p>
</div>
</div>
</div>
CSS
.container{
text-align:center;
}
.market-blocks{
background: #3aa0d1;
padding: 30px 0 30px 0;
cursor:pointer;
}
.orange{
background: #e97d68;
}
i.market-icon {
-webkit-transition: 1s ease-in;
-moz-transition: 1s ease-in;
-o-transition: 1s ease-in;
transition: 1s ease-in
}
.market-blocks:hover i.market-icon {
-webkit-transform: translate(0,-70px);
-moz-transform: translate(0,-70px);
-o-transform: translate(0,-70px);
-ms-transform: translate(0,-70px);
transform: translate(0,-70px);
font-size: 1.8em;
}
How can I do it? And also is there a better way to do the movement from the initial position to the top of the <div>?
Pure HTML/CSS solution:
.container {
text-align: center;
}
.market-blocks {
background: #3aa0d1;
padding: 30px 0;
cursor: pointer;
}
.orange {
background: #e97d68;
}
.service-box {
display: inline-block;
}
.service-box-header {
position: relative;
}
.market-title {
padding-bottom: 5em;
-webkit-transition: 1s ease-in;
transition: 1s ease-in
}
.market-icon {
position: absolute;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: 1s ease-in;
transition: 1s ease-in
}
.market-blocks:hover .market-title {
padding-bottom: 0;
}
.market-blocks:hover .market-icon {
bottom: 100%;
font-size: 1.8em;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollIn">
<div class="service-box">
<div class="service-box-header">
<h2 class="market-title">Very-very-very-very-very-very-very-very loooooooooooooooooooong title</h2>
<i class="fa fa-5x fa-paper-plane wow bounceIn market-icon"></i>
</div>
<p class="">Certain text below the icon</p>
</div>
</div>
</div>
</div>