I'm trying to do some CSS translate animation. Unfortunately Firefox doesn't perform well. It looks a bit choppy. IE11, Edge, Chrome and even Firefox for Android run this animation very smoothly. So what is wrong in my code below?
Note that I have Firefox 49.0.2 64bit and Windows 10.
.content {
height: 200px;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
p {
margin: 0;
padding: 0;
width: 300px;
opacity: 0;
font-family: Helvetica, sans-serif;
font-size: 18px;
letter-spacing: 2px;
line-height: 1.4em;
text-transform: uppercase;
animation: intro 2s ease-out infinite;
}
#keyframes intro {
0% {
opacity: 0;
transform: translate(15px, 15px);
}
100% {
opacity: 1;
transform: none;
}
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Related
There's some awkward vertical line glitch apparently due to filter property(applied on image's hover state) while hovering on a image in chrome(It works fine in mozilla firefox). I have searched on the web but all I could find are kind of similar glitches/bugs or whatever while using backdrop-filter property. So a specific explanation or workaround to these glitch/bug/rendering problem due to this filter property in css would be really nice.
Here's my html code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Lato';
font-weight: 400;
line-height: 1.7;
padding: 3rem;
color: #777;
}
.header-tertiary {
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
}
.row {
max-width: 114rem;
margin: 0 auto;
}
.story {
width: 75%;
margin: 0 auto;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
padding: 6rem;
padding-left: 9rem;
font-size: 1.6rem;
transform: skewX(-12deg);
}
.story__shape {
width: 15rem;
height: 15rem;
float: left;
shape-outside: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
transform: translateX(-3rem) skewX(12deg);
position: relative;
}
.story__img {
height: 100%;
transform: translateX(-3rem) scale(1.4);
transition: all .5s;
}
.story-text {
transform: skewX(12deg);
}
.story__caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 30%);
color: #fff;
text-align: center;
opacity: 0;
transition: all .5s ease;
}
.story:hover .story__caption {
opacity: 1;
transform: translate(-50%, -50%);
}
.story:hover .story__img {
filter: blur(2px) brightness(80%);
-webkit-filter: blur(2px) brightness(80%);
transform: translateX(-3rem) scale(1);
}
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="row">
<div class="story">
<figure class="story__shape">
<img class="story__img" src="https://images.unsplash.com/photo-1612306055306-e72bd105ad3d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1225&q=80" alt="story image">
<figcaption class="story__caption">
Mary Smith
</figcaption>
</figure>
<div class="story-text">
<h3 class="header-tertiary u-margin-bottom-small">
I had the best week ever with my family
</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem doloribus voluptatem nisi vel hic suscipit repellendus eum, sed earum placeat quaerat, laboriosam dolores atque ratione odio quidem reprehenderit ea ab. Dolor provident tempora nobis quaerat
consequatur sequi alias illum veritatis.
</p>
</div>
</div>
</div>
</body>
</html>
Note: I have not made my code responsive so please view on full page.
This question already has answers here:
What elements can be contained within a <a> tag?
(6 answers)
Closed 3 years ago.
I'm trying to create a card for a website I'm pulling together. On hover, some text slides into view (I've used :hover combined with max-height). To make the whole card clickable, I tried to change a <div> to <a>, I added display:block.
I'm surprised that the behaviour is different - I expected them to be the same.
Two questions:
How do I get the right behaviour - simply making the card clickable without JavaScript.
What is the underlying issue that I've missed?
This version has the <div>:
.card {
background: yellow;
border-radius: .5em;
height: 15em;
position: relative;
overflow: hidden;
transition: all 1s ease-in-out;
}
.card:hover img {
transform: scale(1.1);
}
.card:hover .card-slider {
max-height: 7em;
}
.card-content {
position: absolute;
bottom: 0;
display: block;
}
.card-slider {
transition: all 1s ease-in-out;
max-height: 0;
overflow: hidden;
}
.card h1 {
background: rgba(0, 0, 0, 0.1);
color: white;
}
.card img {
transition: all 1s ease-in-out;
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.card .meta-cat {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.card .meta {
display: flex;
margin: 0;
padding: 0;
justify-content: space-between;
}
.meta-author, .meta-date {
list-style: none;
}
<article class="card">
<img src="http://via.placeholder.com/350x200" alt="">
<header class="meta-cat">Lorem.</header>
<div href="#" class="card-content">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, velit.</h1>
<section class="card-slider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dignissimos dolor ex in iusto magnam
molestias odit quaerat rem rerum, similique sit sunt totam veritatis vitae voluptate, voluptatum? Amet,
maxime.</p>
<ul class="meta">
<li class="meta-author">WO J Wright</li>
<li class="meta-date">Posted 5 days ago</li>
</ul>
</section>
</div>
</article>
This version changes the <div> to a <a>.
.card {
background: yellow;
border-radius: .5em;
height: 15em;
position: relative;
overflow: hidden;
transition: all 1s ease-in-out;
}
.card:hover img {
transform: scale(1.1);
}
.card:hover .card-slider {
max-height: 7em;
}
.card-content {
position: absolute;
bottom: 0;
display: block;
}
.card-slider {
transition: all 1s ease-in-out;
max-height: 0;
overflow: hidden;
}
.card h1 {
background: rgba(0, 0, 0, 0.1);
color: white;
}
.card img {
transition: all 1s ease-in-out;
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.card .meta-cat {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.card .meta {
display: flex;
margin: 0;
padding: 0;
justify-content: space-between;
}
.meta-author, .meta-date {
list-style: none;
}
<article class="card">
<img src="http://via.placeholder.com/350x200" alt="">
<header class="meta-cat">Lorem.</header>
<a href="#" class="card-content">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, velit.</h1>
<section class="card-slider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dignissimos dolor ex in iusto magnam
molestias odit quaerat rem rerum, similique sit sunt totam veritatis vitae voluptate, voluptatum? Amet,
maxime.</p>
<ul class="meta">
<li class="meta-author">WO J Wright</li>
<li class="meta-date">Posted 5 days ago</li>
</ul>
</section>
</a>
</article>
Actually you can have block elements inside <a> tag, as you already said, just replacing the nested <a> tag inside .meta-author with a span, makes your last snipped works.
.card {
background: yellow;
border-radius: .5em;
height: 15em;
position: relative;
overflow: hidden;
transition: all 1s ease-in-out;
}
.card:hover img {
transform: scale(1.1);
}
.card:hover .card-slider {
max-height: 7em;
}
.card-content {
position: absolute;
bottom: 0;
display: block;
}
.card-slider {
transition: all 1s ease-in-out;
max-height: 0;
overflow: hidden;
}
.card h1 {
background: rgba(0, 0, 0, 0.1);
color: white;
}
.card img {
transition: all 1s ease-in-out;
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.card .meta-cat {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.card .meta {
display: flex;
margin: 0;
padding: 0;
justify-content: space-between;
}
.meta-author, .meta-date {
list-style: none;
}
<article class="card">
<img src="http://via.placeholder.com/350x200" alt="">
<header class="meta-cat">Lorem.</header>
<a href="#" class="card-content">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, velit.</h1>
<section class="card-slider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dignissimos dolor ex in iusto magnam
molestias odit quaerat rem rerum, similique sit sunt totam veritatis vitae voluptate, voluptatum? Amet,
maxime.</p>
<ul class="meta">
<li class="meta-author"><span>WO J Wright</span></li>
<li class="meta-date">Posted 5 days ago</li>
</ul>
</section>
</a>
</article>
I'm learning css have the current code.
.nav-item {
padding-left: 2rem !important;
}
.gutterwire-main-content {
margin-top: 1rem;
}
.gw_content_title {
padding: 7px;
position: relative;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
font-family: CNN, Helvetica Neue, Helvetica, Arial, Utkal, sans-serif;
font-weight: 700;
-webkit-font-smoothing: antialiased;
font-size: 16px;
font-size: 1.0666666667rem;
line-height: 1.375;
}
.gw_content_title:after {
background-color: #3061f3;
bottom: 0;
content: "";
height: .25rem;
left: 0;
position: absolute;
-webkit-transition: width .2s ease-in-out;
-o-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
width: 1rem;
}
.gw--extra-small {
border-top: 1px solid #d9d9d9;
}
.lastest-gutters li {
list-style: none;
margin-bottom: 2rem !important;
padding: 0;
}
<div class="lastest-gutters col-sm-6 col-md-3">
<h2 class="gw_content_title">Lastest news</h2>
<ul>
<li>
<article style="border:1px solid red; margin-bottom:20px">
ddddddd
</article>
<article style="border:1px solid red; margin-bottom:20px">
ddddddd
</article>
</li>
</ul>
</div>
https://jsfiddle.net/jhqwbghp/1/
So far I've gotten the blue bar I want, but I can't add the line above the article to make it look like this:
How would I do this to match the picture I provided?
I would separate each article into its own li. You can then apply a border-top to each li which will give you the separation lines and then you can use first-child to apply a pseudo element to the first list item, which will give you the blue underline. You could do something like this:
.nav-item{
padding-left: 2rem !important;
}
.gutterwire-main-content {
margin-top: 1rem;
}
.gw_content_title {
padding: 7px;
position: relative;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;
font-weight: 700;
-webkit-font-smoothing: antialiased;
font-size: 16px;
font-size: 1.0666666667rem;
line-height: 1.375;
}
.gw--extra-small {
border-top: 1px solid #d9d9d9;
}
.latest-gutters ul {
margin:0;
padding:0 0 0 7px;
}
.latest-gutters li {
list-style: none;
padding:1rem 0;
border-top:1px solid #d9d9d9;
position:relative;
}
.latest-gutters li:first-child:before {
background-color: #3061f3;
top:-.25rem;
content: "";
height: .25rem;
left: 0;
position: absolute;
-webkit-transition: width .2s ease-in-out;
-o-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
width: 1rem;
}
<div class="latest-gutters col-sm-6 col-md-3">
<h2 class="gw_content_title">Latest news</h2>
<ul>
<li>
<article>ddddddd</article>
</li>
<li>
<article>ddddddd</article>
</li>
</ul>
</div>
Note that I fixed some spelling errors in both your HTML and CSS
I just added
border-bottom: 1px solid #ddd;
CSS rule to .gw_content_title element.
.nav-item{
padding-left: 2rem !important;
}
.gutterwire-main-content {
margin-top: 1rem;
}
.gw_content_title {
padding: 7px;
position: relative;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;
font-weight: 700;
-webkit-font-smoothing: antialiased;
font-size: 16px;
font-size: 1.0666666667rem;
line-height: 1.375;
border-bottom: 1px solid #ddd; /* Right here! */
}
.gw_content_title:after {
background-color: #3061f3;
bottom: 0;
content: "";
height: .25rem;
left: 0;
position: absolute;
-webkit-transition: width .2s ease-in-out;
-o-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
width: 1rem;
}
.gw--extra-small {
border-top: 1px solid #d9d9d9;
}
.lastest-gutters li{
list-style: none;
margin-bottom: 2rem !important;
padding: 0;
}
<div class="lastest-gutters col-sm-6 col-md-3">
<h2 class="gw_content_title">Lastest news</h2>
<ul>
<li>
<article style="border:1px solid red; margin-bottom:20px">
ddddddd
</article>
<article style="border:1px solid red; margin-bottom:20px">
ddddddd
</article>
</li>
</ul>
</div>
you could use a hr and then style the hr with css:
<hr>
<p>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr>
<p>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr>
<p>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
or us a css border top:
.newsBox {
border-bottom : 4px solid #476DA5;
width: 50px;
}
.box {
border-top : solid 1px #333333;
width: 50%;
}
<div class="newsBox">
<h2>News</h2>
</div>
<div class="box">
<p>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="box">
<p>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="box">
<p>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
I'm relatively new at coding and I'm trying to make it so one image fades to a different image and that image has text over it.
I'm using Tumblr, so PHP-5-only MVC I'm pretty sure.
And here's what I have so far:
<style>
#imagefade {
background-image: url('http://i65.tinypic.com/107kqbq.jpg');
position: absolute;
}
#imagefade img {
-webkit-transition: all ease 1.5s;
-moz-transition: all ease 1.5s;
-o-transition: all ease 1.5s;
-ms-transition: all ease 1.5s;
transition: all ease 1.5s;
}
#imagefade img:hover {
opacity: 0;
}
#text {
position: center;
}
.image {
position: relative;
}
p {
position: absolute;
top: 200px;
left: 38px;
width: 100%;
font-family: arial;
font-size: 12px;
color: white;
}
</style>
<div id="imagefade">
<img src="http://i68.tinypic.com/2i9s4eb.jpg" />
<p>text heading here</p>
</div>
If I got it correct from what you want, the easiest way to do this is use position: absolute; and opacity on :hover to achieve this. The positioning will set the layers on top of each other and not next to each other (as in your example).
See my example below.
.container {
background: lightblue;
position: relative;
width: 500px;
height: 300px;
}
.box {
background-image: url('https://i.imgur.com/AzeiaRY.jpg');
background-position: center;
position: absolute; /* Setting the boxes on top of each other */
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
transition: opacity .4s ease-in-out; /* Transition the opacity for the :hover */
}
.image-2 {
background-position: bottom right;
opacity: 0;
}
.image-1:hover .image-2 {
opacity: 1;
}
/* Pure for styling below */
.box-text {
position: absolute;
top: 0;
left: 0;
color: #fff;
padding: 10px;
background: rgba(0, 0, 0, .8);
width: 40%;
height: 100%;
box-sizing: border-box;
}
<div class="container">
<div class="box image-1">
<div class="box image-2">
<div class="box-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, mollitia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ipsa maxime modi velit similique maiores, porro voluptate? Molestias ratione natus consequatur libero eaque
pariatur optio quisquam minima. Nemo quis, odit.
</p>
</div>
</div>
</div>
</div>
I have a Teaser with a "toggle"-Animation, as can be seen on JSFiddle or below:
.ax {
height:60px;
width:150px;
background:gold;
}
.caption {
position: absolute;
left:0;
top: 35%;
overflow: hidden;
right: 0;
background-color: rgba(24,88,140,0.7);
width: 100%;
height: 52px;
z-index: 2;
-o-transition: 500ms;
-webkit-transition: 500ms;
-moz-transition: 500ms;
-ms-transition: 500ms;
transition: 500ms;
font-weight: lighter;
padding: 10px;
color: #fff;
}
a.link{
color: #fff;
overflow: hidden;
width: 80%;
margin-bottom: 30px;
font-weight: lighter;
font-size: 16px;
line-height: 22px;
}
.caption:hover {
height: 100%;
top: 0;
}
.box {
position:relative;
width:250px;
height:200px;
}
/*TABLE CELL METHOD*/
.caption2 {
position: absolute;
left:0;
top: 35%;
overflow: hidden;
right: 0;
background-color: rgba(24,88,140,0.7);
width: 100%;
height: 52px;
z-index: 2;
-o-transition: 500ms;
-webkit-transition: 500ms;
-moz-transition: 500ms;
-ms-transition: 500ms;
transition: 500ms;
font-weight: lighter;
padding: 10px;
color: #fff;
display:table;
}
.caption2:hover {
height: 100%;
top: 0;
}
a.link2{
display:table-cell;
vertical-align: middle;
overflow: hidden;
width: 80%;
margin-bottom: 30px;
font-weight: lighter;
font-size: 16px;
line-height: 22px;
}
<div class="box">
<div class="caption">
Lorem Ipsum blabla bla blahah ipsum lorem blablablahh
<p class="captiontext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div><br><br
<br><br>
table cell method (div.caption2 display:table and a.link display:table-cell + vertical-algin:middle)
<br><br>
<div class="box">
<div class="caption2">
<a class="link2" href="#">Lorem Ipsum blabla bla blahah ipsum lorem blablablahh</a>
<p class="captiontext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
I want to align the link in the vertical center of the blue box. The link can be a single line or two lines (at most), but it should always be centered vertically.
The CSS property lineheight doesn't work with two line links, whereas the table(-cell)-method also doesn't work (see above).
Is there any way to center both one and two line links in my box?
The display type "Flexbox" may be useful for this. Apply this CSS to the parent of the child you want centered:
display: flex;
flex-direction: column;
justify-content: center;
To verticly center any element, you can apply this style:
.element
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
You will have to replace your table cells with columns in order to replicate your current styles. Credit to Sebastian Ekstrom for the solution.
Another way is vertical-align on pseudoelement:
https://codepen.io/darxide/pen/xRmYdQ
<div class="block" style="height: 300px;">
<div class="centered">
vertical center
</div>
</div>
.block:before {
content: ' ';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered {
display: inline-block;
vertical-align: middle;
}