Text gets blur when using translate property in css - html

I have one section which has an image & some text.
What I want is to hover over a div and it should show little rise animation effect on the div itself.
It's working, but while the animation is playing, I've noticed that the text gets a little size change.
.box-cards {
width: 100%;
padding: 10px 10px 30px 10px;
min-height:140px;
margin-bottom:20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
img{width:300px; height:200px;}
.box-cards:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
<div class="box-cards">
<div class="box-image">
<img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
</div>
<div class="box-content">
<h3>Hello there</h3>
</div>
</div>


add hover styles to box-image instead of box-cards, check below
Styles
.box-cards {
width: 100%;
padding: 10px 10px 30px 10px;
min-height:140px;
margin-bottom:20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
img{width:300px; height:200px;}
.box-image:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
Dom
<div class="box-cards">
<div class="box-image">
<img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
</div>
<div class="box-content">
<h3>Hello there</h3>
</div>
</div>


try this
use .box-image instead of .box-card:hover
.box-cards {
width: 100%;
padding: 10px 10px 30px 10px;
min-height: 140px;
margin-bottom: 20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
img {
width: 300px;
height: 200px;
}
.box-image:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
<div class="box-cards">
<div class="box-image">
<img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
</div>
<div class="box-content">
<h3>Hello there</h3>
</div>
</div>


You have to change .box-cards img:hover instead of .box-cards:hover
.box-cards {
width: 100%;
padding: 10px 10px 30px 10px;
min-height:140px;
margin-bottom:20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
img{width:300px; height:200px;}
.box-cards img:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
<div class="box-cards">
<div class="box-image">
<img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
</div>
<div class="box-content">
<h3>Hello there</h3>
</div>
</div>

Related

Smooth transition when show enlarged picture in mouse hover over an image

I am new in HTML, CSS. I want to have hover effect on an image in my website. The code is kind of working. However, when it ease out it is not as smooth as when it get enlarged. I want a smooth transition in both ways. Here I submit my css and html code. There is a big chance many things are wrongly or inefficiently used here. It would be really great if someone can help me out with this.
CSS
.about .block h2 {
padding-top: 35px;
padding-bottom: 20px;
margin: 0;
}
.about .block h4 {
font-size: 20px;
text-align: justify;
}
/*----------------------*/
.about .block img {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 50%;
}
.about .about-img {
overflow: hidden;
}
.about .about-img:hover img {
-webkit-transform: scale3D(1.1, 1.1, 1);
transform: scale3D(1.1, 1.1, 1);
}
.about .about-img img {
opacity: 1;
transition: all 0.2s ease-in-out;
}
.effect {
border: none;
margin: 0 auto;
}
.effect:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
HTML
<section class="about">
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="block">
<div class="section-title">
<h2>ABOUT X</h2>
</div>
<h4> Here I will write some text next to the circular image. I want enlarged picture when mouse hover over on the image.
</h4>
</div>
</div>
</div>
<!-- .col-md-7 close -->
<div class="col-md-5 col-sm-12">
<div class="block">
<img class="effect" src="image.jpg" alt="Img">
</div>
</div>
<!-- .col-md-5 close -->
</div>
</div>
</section>

I think your problem lies on .effect class
You should have include the transition property on your .effect class
.effect {
border: none;
margin: 0 auto;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
That should do the transition when leaving your hover state.

css dynamically overlaid <divs> with mouse-over opacity

We are trying to get our new company-team page up and running. What we are trying to accomplish is to have employee images in <divs> so they resize dynamically, and then on mouse over have the image dimmed and the employee bio visible. Something similar to the employee mouseover found here: http://studiompls.com/about/
What has been cobbled together that sort of works:
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
position:relative;
background: #6E6E6E;
color: #fff;
font-weight:bold;
top:0;
left:0;
opacity: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
div.gallery:hover {
opacity: .6;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
position: relative;
top: 50%;
transform: translateY(-50%);
vertical-align:middle;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
vertical-align:middle;
position:relative;
}
.responsive:hover{
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.wrapper{
position:relative;
background: #6E6E6E;
color: #fff;
font-weight:bold;
top:0;
left:0;
opacity: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
.wrapper:hover{
opacity: .6;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
</style>
</head>
<body>
<div class="responsive">
<div class="wrapper">
<div class="gallery">
<img src="images/Gary.jpeg" alt="" width="300" height="200">
</div>
</div>
</div>
<div class="responsive">
<div class="wrapper">
<div class="gallery">
<img src="images/Andy.jpeg" alt="" width="300" height="200">
</div>
</div>
</div>
<div class="responsive">
<div class="wrapper">
<div class="gallery">
<img src="images/Chris.jpg" alt="" width="300" height="200">
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="responsive">
<div class="wrapper">
<div class="gallery">
<div class="clearfix"></div>
<div style="padding:6px;">
</div>
</body>
</html>
The overlaid <div>s do no stay lined up, and if we add text to the background <div> it separates them further. Anyone see what's missing here?

Try this HTML and CSS
Extra CSS
.container {
position: relative;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
background-color: black;
}
.text {
color: white;
font-size: 16px;
padding: 16px 32px;
}
UPdated HTML
<div class="gallery container">
<img class="image" src="https://www.w3schools.com/howto/img_avatar.png" width="300" height="200">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container1 {
display: flex;
flex-wrap: wrap;
}
div.gallery {
position:relative;
background: #6E6E6E;
color: #fff;
font-weight:bold;
top:0;
left:0;
opacity: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
div.gallery:hover {
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
position: relative;
top: 50%;
transform: translateY(-50%);
vertical-align:middle;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
width:33.3%;;
vertical-align:middle;
position:relative;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.9%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.wrapper{
position:relative;
background: #6E6E6E;
color: #fff;
font-weight:bold;
top:0;
left:0;
opacity: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
.wrapper:hover{
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
.container {
position: relative;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
background-color: black;
}
.text {
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<body>
<div class="container1">
<div class="responsive">
<div class="wrapper">
<div class="gallery container">
<img class="image" src="https://www.w3schools.com/howto/img_avatar.png" width="300" height="200">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
</div>
</div>
<div class="responsive">
<div class="wrapper">
<div class="gallery container">
<img class="image" src="https://www.w3schools.com/howto/img_avatar.png" width="300" height="200">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
</div>
</div>
<div class="responsive">
<div class="wrapper">
<div class="gallery container">
<img class="image" src="https://www.w3schools.com/howto/img_avatar.png" width="300" height="200">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="responsive">
<div class="wrapper">
<div class="gallery">
<div class="clearfix"></div>
<div style="padding:6px;"></div>
</div>
</body>
</html>

How can i make the picture zoom in with css when my picture is 100% width in a bootstrap column?

How can i make the picture zoom in with CSS when my picture is 100% width in a bootstrap column? With my code below, it seems to transition outside the frame.
.frame {
width: 100%;
height: 75%
overflow: hidden;
}
.zoomin img {
width: 100%;
height: 75%
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.zoomin img:hover {
width: 105%;
}
<div class="col-md-3">
<div class="zoomin frame">
<img src="http://lorempixel.com/400/200/abstract/1/" title="" />
</div>
</div>

You don't need change your image size, you can set transform: scale to zoom them.
.frame {
width: 100%;
height: 100%
overflow: hidden;
}
.zoomin img {
width: 100%;
height: 100%
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.zoomin img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div class="col-md-3">
<div class="zoomin frame">
<img src="http://lorempixel.com/400/200/abstract/1/" title="" />
</div>
</div>

Image on hover overlaps image on the left but not on the right

I'm trying scale up the size of an image on hover. The image is part of a gallery so there are other images on the left and right. The problem is the image on hover overlaps on the left image but not on the right.
I saw this question with the identical problem and tried the fix. It started working on firefox but still no change in Chrome. What's wrong here?
Html
<div class="row" id="attractions">
<div class="container" style="margin-bottom: 20px;">
<div class="attractions-title">
<h1 class="text-center text-danger">Gallery</h1>
</div>
<div class="gallery">
<div class="gallery-item wow fadeIn hidden-xs" data-wow-delay="0.4s">
<img src="img/attractions/adventure-cove.jpg" alt="Adventure Cove Waterpark">
<h4 class="text-center">Adventure Cove Waterpark</h4>
</div>
<div class="gallery-item wow fadeIn hidden-xs" data-wow-delay="0.3s">
<img src="img/attractions/gardens-by-the-bay-5.jpg" alt="Garden By The Bay">
<h4 class="text-center">Garden By The Bay</h4>
</div>
<div class="gallery-item wow fadeIn hidden-xs" data-wow-delay="0.6s">
<img src="img/attractions/Marina-Bay-Sands-4.jpg" alt="Marina Bay Sands">
<h4 class="text-center">Marina Bay Sands</h4>
</div>
</div>
</div>
</div>
CSS
.gallery{
margin: 20px auto 20px auto;
}
.gallery-item{
position:relative;
float:left;
margin: 15px auto 0px auto;
width:100%;
background:rgba(255,255,255,0.95);
padding: 10px;
border-radius:5px;
}
.gallery-item img{
width:100%;
position: relative;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.gallery-item img:hover, .gallery-item img:active{
transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
z-index: 10;
}
You can see it in action here

Add the z-index solution to the .gallery-item element, instead of the images.
.gallery{
margin: 20px auto 20px auto;
}
.gallery-item{
position:relative;
float:left;
margin: 15px auto 0px auto;
width:100%;
background:rgba(255,255,255,0.95);
padding: 10px;
border-radius:5px;
z-index: 9;
}
.gallery-item:hover, .gallery-item:active{
z-index: 10;
}
.gallery-item img{
width:100%;
position: relative;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.gallery-item img:hover, .gallery-item img:active{
transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
}

Chrome Text Flickr on using Css rotate. 'backface-visibility' making things worse

Firstly, here's the fiddle: http://jsfiddle.net/krish7878/wytv7n7n/3/
I am using CSS rotate an icon on hover. I tried using 'webkit-backface-visibility: hidden' and '-webkit-font-smoothing: antialiased;'. They just make text thick and ugly.
Here's the code:
<div class="container">
<div class="row">
<div class="blog-item col-lg-4 col-md-4 col-sm-4">
<div class="image">
<img src="http://3.bp.blogspot.com/-E3B9ce7Ck20/UFBfFrkbV8I/AAAAAAAADX8/fFMHEyZcZDg/s400/Animated-Wallpapers.jpg">
<div class="overlay">
<a href="#">
<i class="fa fa-plus"></i>
</a>
</div><!-- /.overlay -->
</div><!-- /.image -->
<h3>Welcome to A Safer World</h3>
<p>Lorem ipsum dolor sit amet, consectetur </p>
</div><!-- /.blog-item -->
</div><!-- /.row -->
</div><!-- /.container -->
CSS:
.blog-item{
overflow: hidden;
}
.image{
position: relative;
overflow: hidden;
}
.image .overlay{
position: absolute;
width: 100%;
height: 100%;
background-color: #49c8ff;
top: 0px;
opacity: 0;
transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
}
.blog-item:hover .overlay{
opacity: 1;
}
.blog-item h3,
.blog-item p{
font-family: "Source Sans Pro";
font-weight: "400";
}
.overlay a{
width: 35px;
height: 35px;
border: 1px solid #fff;
position: absolute;
display: block;
margin: 0 auto;
left: 0px;
right: 0px;
border-radius: 100%;
top:30%;
text-align: center;
transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
}
.image:hover a{
top: 40%;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.overlay a:hover{
background-color: #297595;
border: 1px solid #297595;
}
.overlay a i{
color: #fff;
position: relative;
top: 7px;
}

Well , chrome will use DirectWrite from version 37 and till that , most WD know that it dosen't renders fonts correctly.
Here its discussed : Chromium issue
And another SO question with detailed answers : SO link
Try changing your font-family it solved by changing it to sans-sarif or
Try Other Fonts!
FlickerRemoved
.blog-item h3, .blog-item p {
font-family:sans-serif;
font-weight: 400";
}