i'm trying to create a responsive photo gallery but I couldn't change neither the height or the width of my box.
I was able to fix its width adding style property to the html but it won't work for the height as well.
I've read many thread about the height problem but nothing works for me, some suggested the absolute position instead of relative one but it ruins my layout.
Can't seem to get what i am doing wrong, could anyone help me please?!
Here's my code:
.container {
position: relative;
width: 100%;
margin-top: 5%;
background-color: #203B5B;
padding: 1% 1% 0% 1%;
height: 100%;
}
.container:after {
content: '';
display: inline-block;
width: 100%;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
}
.box {
margin-top: 0%;
height: 20%;
padding-bottom: 90%;
position: relative;
float: left;
cursor: default;
overflow: hidden;
}
.box:after {
content: '';
position: absolute;
cursor: default;
background-color: #000;
margin-left: 0%;
margin-top: 6%;
opacity: 0;
z-index: 55;
width: 50%;
height: 72.5%;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-ms-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.box:hover::after {
background-color: #000;
opacity: .7;
}
.container .box .caption {
position: absolute;
z-index: 60;
width: 45%;
margin-left: 2.5%;
top: 40%;
-webkit-transform: scale(3);
-moz-transform: scale(3);
-ms-transform: scale(3);
-o-transform: scale(3);
transform: scale(3);
text-align: center;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-ms-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
font: 90% montserrat, sans-serif;
color: #fff;
opacity: 0;
}
.box:hover .caption {
-webkit-transform: scale(1) translate(0%, -50%);
-moz-transform: scale(1) translate(0%, -50%);
-ms-transform: scale(1) translate(0%, -50%);
-o-transform: scale(1) translate(0%, -50%);
transform: scale(1) translate(0%, -50%);
opacity: 1;
}
.box img {
position: absolute;
left: 50%;
border-style: solid;
border-color: rgba(255, 255, 255, 0.86);
border-width: 3.5px;
outline-style: solid;
outline-width: 5px;
outline-color: #182D46;
cursor: pointer;
top: 37%;
height: 70%;
width: 95%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 50;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-ms-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.box:hover img {
height: 70%;
}
<div class="container">
<div class="box" style="width:14.6%;">
<div class="caption">1</div>
<img src="1.jpg" width="495" height="533" alt="" />
</div>
<div class="box" style="width:14.6%;">
<div class="caption">2</div>
<img src="2.png" width="495" height="533" alt="" />
</div>
<div class="box" style="width:14.6%; ">
<div class="caption">3</div>
<img src="3.jpg" width="495" height="533" alt="" />
</div>
<div class="box" style="width:14.6%">
<div class="caption">4</div>
<img src="4.png" width="495" height="533" alt="" />
</div>
<div class="box" style="width:14.6%">
<div class="caption">5</div>
<img src="5.png" width="495" height="533" alt="" />
</div>
<div class="box" style="width:14.6%">
<div class="caption">6</div>
<img src="6.png" width="495" height="533" alt="" />
</div>
<div class="box" style="width:14.6%">
<div class="caption">7</div>
<img src="7.png" width="495" height="533" alt="" />
</div>
</div>
thank you!
If you're setting the width and height for your box div in percentages, it is taking x% of the parent. In this case the container div. Which in this case also got its width and height set in percentages. But you haven't set a width and height for its parent, the <body>. And the <body> has <html> as its parent.
So either define a fixed height and width for the container div, or define a width and height for your <body> and <html> like so:
html,
body {
width: 100%;
height: 100%;
}
Code snippet
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
position: relative;
width: 100%;
margin-top: 5%;
background-color: #203B5B;
padding: 1% 1% 0% 1%;
height: 100%;
}
.box {
width: 14.25%;
height: 50%;
position: relative;
float: left;
cursor: default;
overflow: hidden;
}
.box img {
border: 3.5px solid rgba(255, 255, 255, 0.86);
cursor: pointer;
width: 100%;
}
<div class="container">
<div class="box">
<div class="caption">1</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
<div class="box">
<div class="caption">2</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
<div class="box">
<div class="caption">3</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
<div class="box">
<div class="caption">4</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
<div class="box">
<div class="caption">5</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
<div class="box">
<div class="caption">6</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
<div class="box">
<div class="caption">7</div>
<img src="https://www.fillmurray.com/640/360" />
</div>
</div>
Related
So what I'm trying to make is a banner that has scale and transform like in this webpage: https://www.johannesfog.dk/
So the two landscape images overlap each other on hover.
This is how far I got:
<div class="container">
<div class="image1">
<a href="#">
<img src="">
</a>
</div>
<div class="image2">
<a href="#">
<img src="">
</a>
</div>
</div>
<script src=""></script>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.container .image1 {
width: 50%;
overflow: hidden;
}
.container .image2 {
width: 50%;
overflow: hidden;
}
.container img {
width: calc(100% - (0px * 2));
}
.container .image1:hover {
transform: scale(1.5);
transform: translate(50%, 0%);
overflow: hidden;
transition: ease-in-out, transform .3s ease-in-out;
}
.container .image2:hover {
transform: scale(1.5);
transform: translate(-50%, 0%);
overflow: hidden;
transition: ease-in-out, transform .3s ease-in-out;
}
Right now the img only transform.
I tried to replicate a border hover effect but I didn't understand why I need to use ::before and ::after to do this Css effect.
This is the page example with the content that I want to replicate with css (I want to replicate the border effect):
http://77.238.26.244:81/confimi/pagina-di-test/
This is the homepage where I tried to replicate the css:
http://77.238.26.244:81/confimi/
In the first row there is the "example" and in the row below there is my attempt
This is the code that I made:
round {
background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
}
.layer {
background-color: rgba(18, 29, 47, 0.96);
background-repeat: repeat;
width: 100%;
height: 100%;
text-align: center;
padding: 200px 20px 200px 20px;
}
.div-diviso {
width: 17%;
margin: 10px;
display: inline-block;
position: relative;
box-sizing: border-box;
}
.div-diviso img {
width: 100%;
position: relative;
}
.div-diviso .overlay {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transform: scale(0.1);
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-o-transform: scale(0.1);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
visibility: hidden;
}
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transform: border scale3d(0, 1, 1);
}
#media (min-width: 768px) and (max-width: 980px) {
.layer {
text-align: center;
}
.div-diviso {
width: 47%;
margin: 10px;
}
}
#media (max-width: 767px) {
.layer {
text-align: center;
}
.div-diviso {
width: 98%;
margin: 5px;
}
}
<div class="background">
<div class="layer">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
</dvi>
</div>
You cannot animate borders from the middle natively in css. They will auto transition from the starting point of the div (or from the opposite end if you want to use a transform: rotate(180deg)). Hence, the usage of the ::before & ::after elements.
Also, transform: border scale3d(0, 1, 1); is invalid as border is not a CSS3 property applicable to transform.
If you do not want to use the pseudo elements, then you can use a late appearance of the border on the overlay. However it won't animate from the middle.
Modify your css as:
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transition: border 0.75s;
}
EDIT
If you do want to use the pseudo selectors, apply the following css:
.div-diviso:hover .overlay:before, .div-diviso:hover .overlay:after {
height: 100%;
top: 0;
width: 100%;
left: 0;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.div-diviso .overlay:before, .div-diviso .overlay:after {
content: '';
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 9;
}
.div-diviso .overlay:after {
content: '';
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 50%;
border-top: 3px solid #20bed0;
border-bottom: 3px solid #20bed0;
}
.div-diviso .overlay:before {
width: 100%;
height: 0;
position: absolute;
top: 50%;
left: 0;
border-left: 3px solid #20bed0;
border-right: 3px solid #20bed0;
}
I've been trying to remove this ugly flicker when hovering over the images. I've tried adding -webkit-backface-visibility: hidden; to the hover element along with the :hover itself but can't seem to shake it. Seems the promblem is only on Chrome and Safari.
website: http://best-law-firm-sites.com/lawpromo12/
.col-sm-4 {
width: 33.3333%;
float: left;
}
.panel-wrap {
height: 100% !important;
}
.panel-wrap .col-sm-4 {
padding: 0;
}
.hovereffect {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
-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;
}
.hovereffect h2,
.hovereffect img {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transform: scale(1.001);
-ms-transform: scale(1.001);
-moz-transform: scale(1.001);
-o-transform: scale(1.001);
transform: scale(1.001);
}
.hovereffect:hover img {
-webkit-transform: scale(1.17);
-ms-transform: scale(1.17);
-moz-transform: scale(1.17);
-o-transform: scale(1.17);
transform: scale(1.17);
}
.hovereffect h2 {
bottom: 10%;
color: #fff;
font-size: 30px;
font-weight: 700;
padding: 10px 10px 10px 17px;
position: absolute;
text-align: left;
text-shadow: 2px 3px 6px rgba(0, 0, 0, 1);
text-transform: uppercase;
}
.hovereffect h2::after {
display: block;
content: "";
height: 4px;
width: 75px;
background: #BCA474;
margin: 20px 0 0;
box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
margin: 50px 0 0 0;
background-color: transparent;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 100%;
width: 85%;
position: absolute;
top: 0;
left: 0;
padding: 70px;
}
.hovereffect:hover a.info {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
<div class="col-sm-4 panel-1">
<div class="hovereffect">
<img class="img-responsive" src="http://best-law-firm-sites.com/lawpromo12/wp-content/uploads/2016/02/panel1.jpg" alt="">
<div class="overlay">
<h2>Family Law</h2>
<a class="info" href="services/family-law/"></a>
</div>
</div>
</div>
<div class="col-sm-4 panel-2">
<div class="hovereffect">
<img class="img-responsive" src="http://best-law-firm-sites.com/lawpromo12/wp-content/uploads/2016/02/panel.jpg" alt="">
<div class="overlay">
<h2>Estate Planning</h2>
<a class="info" href="services/estate-planning/"></a>
</div>
</div>
</div>
<div class="col-sm-4 panel-2">
<div class="hovereffect">
<img class="img-responsive" src="http://best-law-firm-sites.com/lawpromo12/wp-content/uploads/2016/02/panel.jpg" alt="">
<div class="overlay">
<h2>Wills & Trusts</h2>
<a class="info" href="services/wills-trusts/"></a>
</div>
</div>
</div>
I have encountered similarly strange behavior in the past when using the backface visibility hack to trick the browser into using the 3d pipeline. There are other ways to 'trick' the browser into using the 3d pipeline like:
.class{
transform: translate3d(0,0,1);
}
You can resolve this problem by increasing the transform scale property to 1.001:
.hovereffect img{transform: scale(1.001);}
I am all new to CSS and CSS animation and I have been curious how to achieve the image rollover effects used here: http://riot.design/portfolio/
Anyone kind enough to show me how its done?
Thank you in advance!
If you want a Slide effect for a Picture you can use CSS3
HTML:
<div class="hover column">
<div>
<figure><img src="surce/pic01.jpg" /></figure>
<span>Hover</span>
</div>
CSS:
.hover figure img {
margin-left: 30px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
That gives you a slide effect.
.media{
height: 200px;
width: 200px;
position: relative;
overflow: hidden;
}
.media img{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition: all ease .5s;
}
.media:hover img{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.overlay{
background: rgba(0,0,0,.5);
visibility: hidden;
opacity: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 1;
}
.media:hover .overlay{
visibility: visible;
opacity: 1;
}
.link{
position: absolute;
padding: 15px;
border: 1px solid #fff;
color: #fff;
transition: all .5s ease;
left: 50%;
top: 50%;
transform: translate(-50%, 0);
}
.media:hover .link{
transform: translate(-50%, -50%);
}
<div class="media">
<div class="overlay">
Link
</div>
<div class="media-image">
<img src="http://lorempixel.com/200/200/nature/" class="img-responsive" alt=""></div>
</div>
I am trying to perform a CSS3 transform transition on an image at the mouse-hover.
This image has a border-radius that disappear after the animation ( In Chrome ) .
here is the html:
<div class="inner">
<a class="imgLink" href="item.iframe.htm" target="_top">
<img src="myimage.jpg" alt="">
<span class="imgLinkOverlay"> </span>
</a>
</div>
and the css:
.inner {
margin: 0.75em;
background: #FFF;
border-radius: 10px;
overflow: hidden;
position: relative;
zoom: 1;
}
.imgLink img {
width: 100%;
display: block;
position: relative;
-webkit-transition: -webkit-transform 0.25s ease-in-out;
transition: transform 0.25s ease-in-out;
}
.imgLink:hover img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
Here can find the fiddle: http://jsfiddle.net/3x2ft/
FIxed!
I added this rule to .inner:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);