I am using isotope plugin for fluid grid and would like to add some effects for images on hover, in this the grid has 3 different images with different height: jsfiddle code. Is there some way to keep them responsive and fix heigh change on hover zoom? Please suggest, what has been done wrong?
HTML
<div class="item">
<a href="https://twitter.com/">
<img src="http://s9.postimg.org/n0sl7ucqn/image.jpg" alt="">
</a>
</div>
<div class="item">
<a href="https://twitter.com/">
<img src="http://s17.postimg.org/6r28okkq7/image.jpg" alt="">
</a>
</div>
<div class="item">
<a href="https://twitter.com/">
<img src="http://s17.postimg.org/c12m24flb/image.jpg" alt="">
</a>
</div>
CSS
.item {
width: 46.1%;
height: auto;
margin-right: 4%;
margin-bottom: 30px;
float: left;
overflow: hidden;
}
#social_indicator {
font-size: 14px;
font-weight: 300;
font-style: italic;
text-align: right;
margin-top: 0;
margin-bottom: 0;
}
.item img {
width: 100%;
height: 100%;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
}
.item img:hover {
width: 105%;
height: 105%;
margin-right: 1%;
margin-bottom: 1%;
}
}
First, the overflow:hidden; should be on the div, not the image.
I would set the height of the div with jQuery to prevent it from scaling, when the image does:
$('.item > a > img').each(function(index, value){
$(value).parent('a').parent('.item').height( $(value).height() );
});
Remember to add the jQuery-library in your <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Related
I'm am facing this problem. I'd like to have a field of divs align next to each other. When the user hovers over the div, the div changes its background-color and gets bigger. With that, it should also be over the divs next to it. But it doesn't do that on one side.
I tried it with different aproaches, like setting the z-index from .thin to 1000 and the one from .thin:hover to 1200 and also tried to change the position to absolute, which made it be over the other ones but floating on the left side.
body {
margin: 0px;
padding: 20px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
z-index: -1;
position:relative;
}
.tiles{
width: 100%;
height: 100%;
align-content: center;
}
.thin {
width: 150px;
height: 150px;
background-color: #EFF0F1;
margin: 3px;
float: left;
border-radius: 3px;
display: table;
}
.thin:hover {
width: 190px;
height: 190px;
background-color: #01A3EE;
margin: -13px;
float: left;
border-radius: 3px;
-webkit-transition: background-color 300ms linear, margin 600ms linear, width 600ms linear, height 600ms linear;
-ms-transition: background-color 300ms linear, margin 600ms linear, width 600ms linear, height 600ms linear;
transition: background-color 300ms linear, margin 600ms linear, width 600ms linear, height 600ms linear;
}
p {
text-align: center;
vertical-align: middle;
display: table-cell;
}
<html>
<head>
<base target="_parent">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<title></title>
<meta>
<meta>
</head>
<body onfocusout="" style="" onload="">
<div id="" class="tiles">
<div id="" class="thin">
<p id="">Residential Property</p>
</div>
<div id="" class="thin">
<p id="">Sales Lead</p>
</div>
<div id="" class="thin">
<p id="">Sales Opportunity</p>
</div>
<div id="" class="thin">
<p id="">Purchase Lead</p>
</div>
<div id="" class="thin">
<p id="">Purchase Opportunity</p>
</div>
</div>
</body>
</html>
So how can i make the div overlap the surrounding divs without moving the div to a different location.
I hope, someone can help with my problem. Thank you very much.
Here is working example: JsFiddle
.container {
display: flex;
}
.item {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background: #ccc;
cursor: pointer;
margin: 5px;
transition: all .4s;
}
.item:hover {
background-color: tomato;
transform: scale(1.3);
}
<div class="container">
<div class="item">
some text
</div>
<div class="item">
some text
</div>
<div class="item">
some text
</div>
<div class="item">
some text
</div>
</div>
z-index only works on positioned elements - below I have made your box relative and added a higher z-index to the hover
The only way to make the elements not move when hovered is to use a transform and scale them, instead of changing their physical width and height.
body {
margin: 0px;
padding: 20px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
}
.tiles {
width: 100%;
height: 100%;
align-content: center;
}
.thin {
width: 150px;
height: 150px;
background-color: #EFF0F1;
margin: 3px;
float: left;
border-radius: 3px;
display: table;
/* added below 2 lines */
z-index: 1;
position: relative;
}
.thin:hover {
background-color: #01A3EE;
transform: scale(1.2); /* change the width and height to a scale transformation so element doesn't move on resize, also no need to repeat items declared in .thin, unless you need to override them */
z-index: 2; /* add this */
-webkit-transition: background-color 300ms linear, transform 600ms linear;
-ms-transition: background-color 300ms linear, transform 600ms linear;
transition: background-color 300ms linear, transform 600ms linear;
}
p {
text-align: center;
vertical-align: middle;
display: table-cell;
}
<html>
<head>
<base target="_parent">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<title></title>
<meta>
<meta>
</head>
<body onfocusout="" style="" onload="">
<div id="" class="tiles">
<div id="" class="thin">
<p id="">Residential Property</p>
</div>
<div id="" class="thin">
<p id="">Sales Lead</p>
</div>
<div id="" class="thin">
<p id="">Sales Opportunity</p>
</div>
<div id="" class="thin">
<p id="">Purchase Lead</p>
</div>
<div id="" class="thin">
<p id="">Purchase Opportunity</p>
</div>
</div>
</body>
</html>
I think you can use scale(1.1); grow the div, it is the much simpler way to do the needful. You only need to update the CSS of :hover
.thin:hover {
transform: scale(1.1);
background-color: #01A3EE;
float: left;
border-radius: 3px;
transition: all 0.3s linear;
}
I try to make 3 column responsive menu with images ,but when I change the #teams .teams width to percents ,div disappears. Any solutions, please!?
There is my code
#teams .team_select {
display: table;
margin: 0 auto 20px auto;
}
#teams #choose {
display: inline-block;
/*width: 32.4%;*/
width: calc(98% / 3);
}
#teams #choose:nth-child(1) {
margin-right: 1%;
}
#teams #choose:nth-child(2) {
margin-right: 1%;
}
#teams .teams {
display: table-cell;
background-size: cover;
background-position: center;
/*width: 360px;
height: 370px;*/
width: calc(98% / 3);
height: auto;
transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
-pre-transition: background-image 1s ease-in-out;
}
#teams .back {
background-image: url("https://f4.bcbits.com/img/a3503173982_16.jpg");
}
<div class="team_select">
<div id="choose">
<a href="">
<div class="teams back"></div>
</a>
</div>
<div id="choose">
<a href="">
<div class="teams back"></div>
</a>
</div>
<div id="choose">
<a href="">
<div class="teams back"></div>
</a>
</div>
</div>
I made a JSFiddle too
I find the solution with this and made the short code ,but it works nice. Only problem is that ,with min-height he leave blank space after divs, and I dont know how to remove that.
HTML
<div id="teams">
<ul>
<li class="back"></li>
<li class="back"></li>
<li class="back"></li>
</ul>
</div>
CSS
#teams{
width:100%;
}
#teams ul{
overflow:auto;
}
#teams li{
list-style:none;
display:inline-block;
width: 31%;
min-height: 700px;
height: auto;
background-size: 100%;
background-repeat: no-repeat;
}
li.back{background-image:url("https://f4.bcbits.com/img/a3503173982_16.jpg");}
li.back:hover{background-image:url("https://designschool.canva.com/wp-content/uploads/sites/2/2015/10/How-To-Use-Blurred-Images-In-Your-Designs-To-Great-Effect_Thumbnail_01.png");}
There is new JSFiddle
Okay so I have been doing some renovations to my website and I am trying to make it so on the home page you see several images and what I want to happen is that when you hover over the image it blurs and and text appears in the center of the image. I've been able to make the images blur but the thing is is that all the tutorials and Q&A on Forums that I've found use absolute positioning.
When I do that though I end up with all the images stacked on top of each other. I then put divs around each image and made the images relatively positioned. The result was the same. I checked my code in validators and it came out with no errors. I could really need some help.
Here is my current setup (the images are where I want them and they blur on hover)
https://jsfiddle.net/u9smc561/
Here is my HTML
<!-- title div -->
<div id="head">
<img src=http://www.mem3500films.minksfamily.com/pic/title.png alt="title" class="M35F">
</div>
<!-- menu bar line for anything bigger than 800px -->
<div class="menuBar line">
<img class='menu home' src=http://www.mem3500films.minksfamily.com/pic/home.png alt="Home" onclick="window.location='index.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
<img class='menu about' src=http://www.mem3500films.minksfamily.com/pic/about.jpg alt="About" onclick="window.location='About.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
<img class='menu comment' src=http://www.mem3500films.minksfamily.com/pic/comment.jpg alt="Comments" onclick="window.location='Comments.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
<img class='menu pic' src=http://www.mem3500films.minksfamily.com/pic/pic.png alt="Pictures" onclick="window.location='Pictures.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
<img class='menu active' src=http://www.mem3500films.minksfamily.com/pic/active.png alt="Activities" onclick="window.location='games.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
</div>
<!-- menu bar line for anything smaller than 800px -->
<div class="smenuBar" style="font-size: 2px;">
<nav>
<ul>
<li class="line">
<img class='menuPic menu' src=http://www.mem3500films.minksfamily.com/pic/mobileMenu.png alt="Menu">
<ul class="selector">
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/home.png alt="Home" onclick="window.location='index.html';"></li>
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/about.jpg alt="About" onclick="window.location='About.html';"></li>
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/comment.jpg alt="Comments" onclick="window.location='Comments.html';"></li>
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/pic.png alt="Pictures" onclick="window.location='Pictures.html';"></li>
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/active.png alt="Activities" onclick="window.location='games.html';"></li>
</ul>
</li>
<li class="close">
<img src=http://www.mem3500films.minksfamily.com/pic/close.png alt="Close" style="margin-top: 5px;">
</li>
</ul>
</nav>
</div>
<!-- Explanation area -->
<br>
<br>MEM 3500 Films is a collection of stop-motion animated videos.
<br>To learn more about MEM 3500 Films check out the About Page.
<br>Just click on the movie poster to go to that movies page where you can watch it.
<!-- main div section with the posters -->
<div style="margin-left:0%; margin-right:0%; width:100%; text-align:left;font-size: 25px">
<br>
<br>
<div class="left">
<img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/tcb.png alt="The Coffee Break" />
<br>
<img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/tvsr.png alt="tvsr" />
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/lt.james.png alt="Lt. James">
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TRR.jpg alt="The robbers race">
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TFP.jpg alt="The French Plane">
</div>
<div class="right">
<img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/MKI6.png alt="MKI6" />
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TPSPoster.png alt="tps">
<br>
<img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/ag.jpg alt="The Air-to-Ground Attack">
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/tcp.jpg alt="The Counterfeiters">
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/mem3500films.jpg alt="mem 3500 films">
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<!-- footer credits -->
<div style="width:100%; text-align:center; font-size: 25px;">
<br>
<footer style="">LEGO, the LEGO logo, and the Minifigure are trademarks and/or copyrights of the LEGO Group. I am not supported by LEGO or in any way is this website. Check out the LEGO website for more cool stuff. LEGO.com
<br>
<p style="margin: 0;">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0; width:88px; height:31px; margin: 10px;" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
</a>
</p>
</footer>
</div>
And my CSS
/* makes the stuff for the tall posters */
.poster {
-webkit-transition: -webkit-filter 0.4s;
-moz-transition: -webkit-filter 0.4s;
-ms-transition: -webkit-filter 0.4s;
-o-transition: -webkit-filter 0.4s;
transition: -webkit-filter 0.4s;
width: 100%;
border-radius: 15px;
max-width: 450px;
max-height: 601px;
}
.poster:hover{
-webkit-filter: blur(7px);
filter: blur(7px);
}
/* makes the stuff for the wide posters */
.poster1 {
-webkit-transition: -webkit-filter 0.3s;
-moz-transition: -webkit-filter 0.3s;
-ms-transition: -webkit-filter 0.3s;
-o-transition: -webkit-filter 0.3s;
transition: -webkit-filter 0.3s;
width: 100%;
border-radius: 15px;
max-width: 450px;
max-height: 260px;
}
.poster1:hover{
-webkit-filter: blur(7px);
filter: blur(7px);
}
/* the main div holders for the posters */
.left {
width: 49%;
display: inline-block;
margin-left: 1px;
text-align: right;
}
.right {
width: 49%;
display: inline-block;
margin-right: 0px;
text-align: left;
}
/* the menu bar stuff */
#media only screen
and (min-width : 801px) {
.menuBar {
display: block;
}
.smenuBar, .close{
display: none;
}
/* makes sure the buttons are not to big */
.home {
width: 10.1%;
max-width: 107px;
}
.about {
width: 11.1%;
max-width: 117px;
}
.comment {
width: 16.7%;
max-width: 173px;
}
.pic {
width: 16.8%;
max-width: 174px;
}
.active {
width: 16.1%;
max-width: 167px;
}
.blank {
width: 1%;
max-width: 3px;
max-height: 25px;
margin-top: 10px;
margin-bottom: 10px;
}
/* makes the hover effect for the menu buttons */
.menu {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-transition: -webkit-filter 0.5s; /* Safari */
-moz-transition: -webkit-filter 0.5s;
-ms-transition: -webkit-filter 0.5s;
-o-transition: -webkit-filter 0.5s;
transition: -webkit-filter 0.5s;
}
.menu:hover {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-filter: invert(1); /* Safari */
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
filter: invert(1);
}
}
/* end of computer menu bar config */
/* start of mobile menu config */
#media only screen
and (max-width : 800px) {
/* stuff to make sure the other menu doesn't show */
.menuBar {
display: none;
}
.smenuBar, .close {
display: block;
}
.menuPic {
width: 90%;
max-width: 143px;
}
/* stuff to make sure there isn't indenting */
li {
list-style-type: none;
padding: 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* drop down part of the menu stuff */
nav ul ul {
height: 0px;
overflow: hidden;
-webkit-transition: height 0.5s; /* Safari */
-moz-transition: height 0.5s;
-ms-transition: height 0.5s;
-o-transition: height 0.5s;
transition: height 0.5s;
}
nav ul .line:hover > ul {
height: 335px;
}
nav ul .line:active > ul {
height: 335px;
}
nav ul .line:hover + .close {
height: 52px;
}
nav ul .line:active + .cose {
height: 52px;
}
.close {
text-align: center;
background:rgba(0,0,0,0.8);
height: 0px;
overflow: hidden;
-webkit-transition: all 0.5s; /* Safari */
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
/* makes the hover effect for the menu buttons */
.menu {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-transition: -webkit-filter 0.5s; /* Safari */
-moz-transition: -webkit-filter 0.5s;
-ms-transition: -webkit-filter 0.5s;
-o-transition: -webkit-filter 0.5s;
transition: -webkit-filter 0.5s;
}
.menu:hover {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-filter: invert(1); /* Safari */
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
filter: invert(1);
}
}
.selector {
width: 100%;
background-image:url('pic/wline.jpeg');
padding: 0;
}
/* end of menu config */
/* sets the body properties */
body {
background-image:url('http://www.mem3500films.minksfamily.com/pic/lego.jpeg');
background-color: #ffd700;
text-align:center;
font-size: 25px;
}
/* the title attributes */
body{margin:0;padding:0}
#head {
background-image:url('http://www.mem3500films.minksfamily.com/pic/lego1.jpeg');
background-repeat:repeat;
width: 100%;
}
/*the menu line div attributes */
body{margin:0;padding:0}
.line {
background-image:url('http://www.mem3500films.minksfamily.com/pic/line.jpeg');
background-repeat:repeat;
width: 100%;
}
/* makes sure that the website title is not to big */
.M35F {
width: 100%;
max-width: 905px;
margin-top: 20px;
margin-bottom: 20px;
}
/* makes sure links never get underlined */
a {
text-decoration:none;
}
/* gives the footer a background image */
footer {
background-image:url('pic/white.jpeg');
background-repeat:repeat;
text-align: left;
background-color: #FFFFFF;
color: #888888;
font-size: 25px;
}
In my current setup I have it so the images resize with the window then stop getting bigger at a certain size. This works fine now and I want it to be able to do this in the end.
But I have tried SOOOO many things to get this to work and spent hours (literally) but no matter what I've done it doesn't seem to work. Is what I am shooting for not even possible with CSS and HTML?
Remember an important concept. Absolute positioned elements are positioned relatively the first ANCESTOR that has positon different from "static"
Thus, to position your "strings" you need to
wrap the images in a div
make that div "position: relative"
put the text in a div or a span or other container
make the container "position: abolute"
This way you should not have problem with images staing one over another.
.poster p {
position:relative;
top:50%;
transform:translateY(-50%);
}
This will position itself in the vertical center.
add the following to .poster:
text-align:center;
I have created a video player controls but I want to know how can I make it responsive as to make only the scrubber move but the play button or volume button to stay in the same place and keep the same distance?
CSS
#videoControls{
height:8%;
top:92%;
width:100%;
background-color:#d92a2e;
background-color: rgba(0,0,0,0.4);
position:relative;
-webkit-transition: top .5s ease-in;
-moz-transition: top .5s ease-in;
-ms-transition: top .5s ease-in;
-o-transition: top .5s ease-in;
transition: top .5s ease-in;
}
[class^="col-"] ,[class*= " col-"]{
position: relative;
top: 50%;
float: left;
}
.col-80{
width: 80%;
}
.col-7-5{
width: 32px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.col-7-6{
width: 7.5%;
}
.col-5{
width: 5%;
}
HTML
<div class='controls' id='videoControls'>
<div class='col-5'>
<div class='btnGrp'>
<div id='play' class='playBtn'></div>
<div id='pause' class='pauseBtn'></div>
</div>
</div>
<div class='col-80'>
<div id='scrubber'>
<div id='track'></div>
<div id='handle' class='draggable'></div>
<div id='handle2' class=''></div>
</div>
</div>
<div class='col-7-5'>
<div class='btnGrp'>
<div id='mute' class='muteBtn'></div>
<div id='unmute' class='unmuteBtn'></div>
</div>
</div>
<div class='col-7-6'>
<div id='timeDisplay'>
<span id='currentTime'></span>
/
<span id='duration'></span>
</div>
</div>
</div>
I have created the Responsive design if you have multiple div when you re-size the browser?
Following is my html structure:
<div id="div-wrap">
<div class="column-1-7"> ... </div>
<div class="column-2-7"> ... </div>
<div class="column-3-7"> ... </div>
</div>
Below is my css structure:
#div-wrap {
white-space: nowrap;
max-width: 100%;
}
.column-1-7,.column-2-7,.column-3-7 {
width: calc(100% / 3);
display: inline-block;
text-align: center;
}
.column-1-7{
background: #ffcc00;
}
.column-2-7{
background: #ffff00;
}
.column-3-7{
background: #ffccff;
}
I want my website to have the same effect this website has: Trask Industries
When the upper right image is hovered the text appears and yellow covers the image.
This is the effect I am failing to recreate in CSS and Html, using headers and hover opacity. In my attempts the headers become opaque rather than standing out like on that site. I also don't know how to make the headers appear and disappear on hover.
Here is the jsfiddle of my attempt.
.content1:hover, .content2:hover, .content3:hover, .content4:hover, .content5:hover, .content6:hover {
color: black;
opacity: 0.30;
transition: .2s;
webkit-transition: .2s;
-webkit-transition: all 500ms ease;
}
You must wrap the h1 and h2 in a div, and you would animate that div in css.
I also added a same class for the contents.
Here is an updated fiddle:
http://jsfiddle.net/bzm6T/2/
Basically, this is the updated code:
Code:
.contents:hover > div {
color: black;
opacity: 1;
}
.contents div {
opacity: 0;
display: block;
width: 100%; height: 100%;
background: rgba(255,255,255,0.3);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
<div class="container">
<a href="articleF.html" class="contents content1">
<div>
<h1>The Low Stakes of Modern life</h1>
<h2>Default 1Default 1Default 1Default 1Default 1Default 1</h2>
</div>
</a>
<a href="articleA1.html" class="contents content2">
<div>
<h1>AARON SWARTZ</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
<a href="articleA2.html" class="contents content3">
<div>
<h1>JOBILLY BOOP</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
<a href="articleD.html" class="contents content4">
<div>
<h1>Content4</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
<a href="articleK1.html" class="contents content5">
<div>
<h1>Content5</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
<a href="articleK1.html" class="contents Content6">
<div>
<h1>Content6</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
</div>
A slightly different approach, but basically the same with CSS transition: FIDDLE
.holder {
width: auto;
margin: 10px auto;
border: 1px solid black;
overflow: hidden;
}
.leftdiv {
float: left;
background-color: blue;
height: 100%;
color: white;
}
.picdiv {
float: right;
background-color: orange;
}
.picdiv img {
opacity: 1;
transition: opacity 1s ease-in-out;
}
.picdiv img:hover {
opacity: 0;
}