Simple blog container, tool tip, simple animation on hover

Developer
Mariam Massadeh
Size
2,834 Kb
Views
28,336
  1. Simple blog container, tool tip, simple animation on hover Previews
  2. Simple blog container, tool tip, simple animation on hover HTML Codes
  3. Simple blog container, tool tip, simple animation on hover CSS Codes
  4. Simple blog container, tool tip, simple animation on hover JS Codes

How do I make an simple blog container, tool tip, simple animation on hover?

/* animation from: http://codepen.io/Hornebom/pen/jwGIE*/. What is a simple blog container, tool tip, simple animation on hover? How do you make a simple blog container, tool tip, simple animation on hover? This script and codes were developed by Mariam Massadeh on 22 September 2022, Thursday.

Simple blog container, tool tip, simple animation on hover Previews
IQ Test

Simple blog container, tool tip, simple animation on hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple blog container, tool tip, simple animation on hover</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="twitter" href="https://twitter.com/MariamMassadeh">t <div>@MariamMassadeh</div></a>
<div class="container"> <div class="line"></div> <div class="L"> <h1>Latest News</h1> <p> you can find our latest News in this blog, you can subcsribe to our blog. <br/><br/> you can find our latest News in this blog, you can subcsribe to our blog. <br/><br/> you can find our latest News in this blog, you can subcsribe to our blog. <br/><br/> you can find our latest News in this blog, you can subcsribe to our blog. </p> </div> <div class="R"> <div class="grid"><img src="http://www.curver.com/assets/images/wysiwyg/Design%20and%20innovation.jpg"/><a class="more">Read More</a></div> <div class="grid"><img src="https://t2.gstatic.com/images?q=tbn:ANd9GcQf1TbVSMmCSXqJ5FxWdpgzmX8FCKkTvmOjVWQU_ajbr9kg44rX"/><a class="more">Read More</a></div> <div class="grid"><img src="https://t0.gstatic.com/images?q=tbn:ANd9GcTgoE2Q4J8ET2FQq8kENJODdhAUW0iPEi7ttxUQgWN7IyHPbE_k"/><a class="more">Read More</a></div> <div class="grid"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTNcVAfz2FvPrPCDNuBkNGgMf1wviXljMor698qpJzOg-h3Qrve"/><a class="more">Read More</a></div> <div class="grid"><img src="http://www.curver.com/assets/images/wysiwyg/Design%20and%20innovation.jpg"/><a class="more">Read More</a></div> <div class="grid"><img src="https://t2.gstatic.com/images?q=tbn:ANd9GcQf1TbVSMmCSXqJ5FxWdpgzmX8FCKkTvmOjVWQU_ajbr9kg44rX"/><a class="more">Read More</a></div> <div class="grid"><img src="https://t0.gstatic.com/images?q=tbn:ANd9GcTgoE2Q4J8ET2FQq8kENJODdhAUW0iPEi7ttxUQgWN7IyHPbE_k"/><a class="more">Read More</a></div> <div class="grid"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTNcVAfz2FvPrPCDNuBkNGgMf1wviXljMor698qpJzOg-h3Qrve"/><a class="more">Read More</a></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple blog container, tool tip, simple animation on hover - Script Codes CSS Codes

body,html
{ font-family:tahoma; text-align:justify; font-weight:lighter; padding:0; margin:0; overflow:hidden;
}
.twitter div
{ font-size:12px; font-weight:lighter; background-color:#f0f0f1; padding:2px; border-radius:0px 5px 5px 0px; position:absolute; margin-top:-25px; margin-left:15px; line-height:30px; display:none;
}
.twitter div:before
{ content: ''; position: absolute; width: 1px; height: 1px; border: 5px solid transparent; border-right-color: #f0f0f1; margin-top: 10px; margin-left: -13px;
}
.twitter
{ color:#00ACEE; text-decoration:none; position:fixed; top:0px; left:0px; font-size:20px; font-weight:bold; padding:5px;
}
.twitter:hover
{ color:#2aa;
}
.twitter:hover div
{ display:block; color:#00ACEE;
}
.container
{ width:700px; margin:0 auto; background-color:#fff; display:table; padding-top:20px; overflow:hidden;
}
.line
{ border-top:2px solid #E0E0E0; width:80%; margin:0 auto; clear:both; margin-bottom:25px;
}
.L
{ float:left; width:200px; line-height:30px;
}
.L h1
{ background-color:#f0f0f0; color: #2aa; border-radius:0px 50px 50px 0px; width:90%; font-size:24px; padding:5px;
}
.L p
{ font-size:12px; width:90%; margin:0 auto; color:#303133;
}
.R
{ float:right; width:425px; background-color:#f0f0f1; margin-right:5px; margin-left:5px;
}
.grid
{ float:left; margin:5px;
}
.grid,img
{ width:200px; height:200px; border:1px solid #f0f0f1;
}
.more
{ position:absolute; margin-top:-30px; font-size:12px; background-color:#f0f0f0; padding:5px; color:#2aa; text-decoration:none;
}
.more:hover
{ color:#a50505; cursor:pointer; -webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.grid:hover
{ -webkit-animation:flipout 0.5s ease forwards; -moz-animation: flipout 0.5s ease forwards; -o-animation: flipout 0.5s ease forwards; animation: flipout 0.5s ease forwards;
}
@-webkit-keyframes flipout { 0% {-webkit-transform: translate(0px, 0px) scale(1);} 30% {-webkit-transform: translate(0px, -30px) scale(0.98);} 100% {-webkit-transform: translate(0px, 0px) scale(0.95);}
}
@-moz-keyframes flipout { 0% {-moz-transform: translate(0px, 0px) scale(1);} 30% {-moz-transform: translate(0px, -30px) scale(0.98);} 100% {-moz-transform: translate(0px, 0px) scale(0.95);}
}
@-o-keyframes flipout { 0% {-o-transform: translate(0px, 0px) scale(1);} 30% {-o-transform: translate(0px, -30px) scale(0.98);} 100% {-o-transform: translate(0px, 0px) scale(0.95);}
}
@keyframes flipout { 0% {transform: translate(0px, 0px) scale(1);} 30% {transform: translate(0px, -30px) scale(0.98);} 100% {transform: translate(0px, 0px) scale(0.95);}
}

Simple blog container, tool tip, simple animation on hover - Script Codes JS Codes

/*
animation from:
https://codepen.io/Hornebom/pen/jwGIE
*/
Simple blog container, tool tip, simple animation on hover - Script Codes
Simple blog container, tool tip, simple animation on hover - Script Codes
Home Page Home
Developer Mariam Massadeh
Username MariamMassadeh
Uploaded September 22, 2022
Rating 3.5
Size 2,834 Kb
Views 28,336
Do you need developer help for Simple blog container, tool tip, simple animation on hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mariam Massadeh (MariamMassadeh) Script Codes
Name
Animated Progress Bar
Time Line
CSS3 Animation
Css3-image-slider-with-stylized-thumbnails
Responsive Text Area with timer, counter and history
Responsive Menu with sub menu- CSS3 animation, simple jquery
Emploee Tree
Qoute
Receipt with result
Menu with a featured tooltip that has an animation from Jumping Animation pen
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!