Develop Reference

REACT - Child position with respect of scale of parent

I have a situation, where I have a parent div in which there can be any number of children divs, now I am applying scale on the parent div, so since the scale is applied on parent it looks that the child element is displacing from its position, I want the children divs to follow parent scale how to manage this situation, here are some portion of my code..
<div className="image-viewer">
<div className="image-wrapper">
<div class="zoom-2 image-outer">
<img class="map-image" src="map.png"/>
<div class="booth" style="left: 617px; top: 178px;"> </div>
<div class="booth" style="left: 735px; top: 160px;"> </div>
</div>
</div>
</div>
In the above code the child elements have there left and top defined dynamically by mouse click position on map image. I have four predefined zoom levels from css which I am supplying dynamically on Zoom In/Out buttons.
Below are my css
.image-viewer .image-wrapper {
position: relative;
width: 92vw;
height: 92vh;
margin: 4vh 4vw;
overflow: hidden;
}
.image-viewer .image-outer {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
.image-viewer .image-outer .map-image {
display: inline-block;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
width: auto !important;
height: auto !important;
background-size: contain!important;
background-position: center!important;
background-repeat: no-repeat !important;
transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
transition: all .4s ease;
-webkit-transition: all .4s ease;
animation: image-fade-in 0.4s ease;
-webkit-animation: image-fade-in 0.4s ease;
}
.image-viewer .image-outer.zoom-1 {
cursor: default;
}
.image-viewer .image-outer.zoom-2 .map-image {
transform: scale3d(1.5, 1.5, 1);
-webkit-transform: scale3d(1.5, 1.5, 1);
}
.image-viewer .image-outer.zoom-3 .map-image {
transform: scale3d(2, 2, 1);
-webkit-transform: scale3d(2, 2, 1);
}
.image-viewer .image-outer.zoom-4 .map-image {
transform: scale3d(2.5, 2.5, 1);
-webkit-transform: scale3d(2.5, 2.5, 1);
}
.image-viewer .image-outer.zoom-5 .map-image {
transform: scale3d(3, 3, 1);
-webkit-transform: scale3d(3, 3, 1);
}
.booth{
width:9px;
height:9px;
border-color:white;
border-width:1px;
border-style:solid;
position:absolute;
z-index:999;
background-color: red;
transition: all .2s ease-in-out;
}
.booth:hover{
cursor: pointer;
transform: scale(2.0);
}
Here is my jsFiddle - https://jsfiddle.net/veda_in/o2qLt4q8/33/

Just change this.
.image-viewer .image-outer.zoom-2 .map-image {
transform: scale3d(1.5, 1.5, 1);
-webkit-transform: scale3d(1.5, 1.5, 1);
}
to :
.image-viewer .image-outer.zoom-2 {
transform: scale3d(1.5, 1.5, 1);
-webkit-transform: scale3d(1.5, 1.5, 1);
}
The problem here is when you are scaling map image, image is scaling but class zoom-2 width is not scaling, which is container for both booth element and map image.
.image-viewer .image-outer {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
So either you scale zoom-2 div class or add zoom-2 class to map-image and define map-image relative.

Can't get div overflow to work properly

I'm hoping someone can help me with an issue I'm running into. I'm trying to set up a series of photos. That have this CSS/HTML property:
http://jsfiddle.net/i_like_robots/7GvV2/embedded/result%2chtml%2ccss/
/*
* Housekeeping
*/
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
.container {
margin: 0 auto;
max-width: 480px;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
I actually got the code from this site.
But there will be upwards of 30 photos, so I was hoping to put them inside a scrolling box/area about 400h x 700w px. When I add the scrolling box, either by HTML, or CSS the results are the same. There is a box, with no scrolling. And all photo's have been shrunken down to fit inside of the box.
Can anyone PLEASE help me with this?
Thanks.

What I've done is removed the CSS for the .container element, in case you want to keep that for a different purpose, and added a .scroller element as a wrapper around the images (within the .container). If you don't have another use for the .container, you can replace .scroller in the CSS with .container, and remove the .container I added to the HTML. A little wordy, so if you need an easier explanation let me know.
So the HTML changes in that there's a new <div> with class scroller surrounding the <article> elements.
The CSS adds the .scroller class, and another rule just to space the images apart a little bit:
.scroller{
margin:0px auto;
height:400px;
max-height:400px;
width:700px;
max-width:700px;
padding:10px 20px;
border:1px solid #aaa;
overflow-y:scroll;
}
.scroller article:not(:last-child){
margin-bottom:10px;
}
Fiddle: http://jsfiddle.net/435rx66s/

What is this scroll box / area?
You've given us this code that you referenced in your implementation, but where is your implementation for us to reference?
The given code works well if you are creating more articles within that container. Give the container a fixed height and set overflow to auto and there should be no problem with getting this content to sit within a scrolling box.
https://jsfiddle.net/i_like_robots/7GvV2/
.container {
height:200px;
overflow:auto;
position:relative;
margin: 0 auto;
max-width: 480px;
}

if you're open to a bit of jquery, there's quite a simple solution.
a short jquery function
$("#container > article:gt(0)").hide();
setInterval(function () {
$('#container > article:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#container');
}, 3000);
will show your articles in turn.
$("#container > article:gt(0)").hide();
setInterval(function () {
$('#container > article:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#container');
}, 3000);
/*
* Housekeeping
*/
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
#container {
margin:0 auto;
max-width: 480px;
max-height:240px;
overflow:hidden;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
article{max-width:480px; max-height:240px; overflow:hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="container">
<article class="caption">
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Alaska</h1>
<p class="caption__overlay__content">
Alaska is a U.S. state situated in the northwest extremity of the North American continent. Bordering the state is Canada to the east, the Arctic Ocean to the north, and the Pacific Ocean to the west and south, with Russia (specifically, Siberia) further west across the Bering Strait.
</p>
</div>
</article>
<article class="caption">
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Michigan</h1>
<p class="caption__overlay__content">
Some dummy text for testing
</p>
</div>
</article>
</div>
</div>

Hover Zoom Effect While Using Object-Fit: Cover

My goal is to have a zoom in effect when a user hovers over an image on my page. I have found code that has this effect;
.transition {
-webkit-transform: scale(1.6);
-moz-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
}
#content {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
Adding the transition to the content when the user hovers over the image.
The problem that I am having is using this technique combined with object-fit: cover. I want the image to fit into a fixed size box (Height: 250px; Width: 25%), while maintaining its aspect ratio (which is accomplished using object-fit: cover).
But, when a user hovers over an image with object-fit: cover, it reverts back to its old aspect ratio, does the zoom, and then goes back to the proper aspect ratio. This leads to some very odd visuals, which can be seen in the following fiddle;
http://jsfiddle.net/y4yAP/982/
Removing the object-fit: cover on #content will fix the problem with the zoom, but distort the aspect ratio.
Any idea how to fix this?

object-fit:cover isn't widely supported and I'm not very familiar with it, I don't know if you are required to use it but I tried something I am more familiar with.
If all the images are 'landscape' then you can use width: 100% and height: auto and the CSS will maintain the aspect ratio for you. To position the images centered in the container I applied position: relative to the container and position: absolute to #content. See: https://css-tricks.com/almanac/properties/p/position/
For the zoom you can just use #content:hover { ... } in your CSS (unless you need jQuery for other purposes).
HTML:
<div id="imageDiv">
<img id="content" src="http://upload.wikimedia.org/wikipedia/en/7/78/Small_scream.png" />
</div>
CSS:
#content:hover {
-webkit-transform: translateX(-50%) translateY(-50%) scale(1.6);
-moz-transform: translateX(-50%) translateY(-50%) scale(1.6);
-o-transform: translateX(-50%) translateY(-50%) scale(1.6);
transform: translateX(-50%) translateY(-50%) scale(1.6);
}
#content {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
#content {
position: absolute;
top: 50%;
left: 50%;
height: auto;
width: 100%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#imageDiv {
position: relative;
height: 250px;
width: 450px;
overflow: hidden;
}
FIDDLE (sans js): http://jsfiddle.net/pqs4vef7/2/

Please check all you need to do is the the width to "max-width", and remove the object-fit:
www.jsfiddle.net/y4yAP/985/

Loading CSS3 when page loads

I have the following HTML code. I have applied some animations to the logo using CSS3 and it's working as I wanted. Now the animation works when we hover on the logo. I want the animation to work automatically when the page loads.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>After Quote</title>
<style type="text/css">
.container {
background: none repeat scroll 0 0 #1180AE;
height: 340px;
margin: 0 auto;
padding-top: 50px;
width: 215px;
background: url(container.jpg) no-repeat;
}
.content {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 8px;
height: 200px;
margin: 0 auto;
padding-top: 115px;
width: 194px;
}
.logo:hover {
border-radius: 50%;
transform: rotate(720deg);
}
.logo {
height: 80px;
margin: 0 auto;
transition: all 1s ease 0s;
width: 80px;
}
.logo img {
border-radius: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="logo"> <img src="logo.jpg" alt="logo" /> </div>
<!--logo-->
</div>
<!--content-->
</div>
<!--container-->
</body>
</html>

There are multiple ways how you can achieve this:
The first one is to add a class to the logo after pageload with JavaScript. You need to do this, because CSS transitions only react on changes like classlist changes, hover etc., but can not start by itself.
The second way is to use CSS keyframe animations, which I believe is more what you want. You can learn about it here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

#-webkit-keyframes anm {
0% {-webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(180deg);}
50% {-webkit-transform: rotate(360deg);}
75% {-webkit-transform: rotate(540deg);}
100% {-webkit-transform: rotate(720deg);}
}
#keyframes anm {
0% {transform: rotate(0deg);}
25% {transform: rotate(180deg);}
50% {transform: rotate(360deg);}
75% {transform: rotate(540deg);}
100% {transform: rotate(720deg);}
}
.logo img {
height: 80px;
border-radius: 15px;
-webkit-animation: anm 1s;
animation: anm 1s;
}
.logo img:hover {
border-radius: 50%;
transition: all 1s ease 0s;
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}

It won't unless you use #keyframes CSS animations. you can use like mentioned below..
and use animation-rotate class in your img tag. Here is the Demo.
.animation-rotate {
margin:auto;
-webkit-animation:coinflip 2s infinite linear;
animation:coinflip 2s infinite linear;
-moz-animation:coinflip 2s infinite linear;
}
#-webkit-keyframes coinflip {
0% {
-webkit-transform:rotateY(-1deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}
#-moz-keyframes coinflip {
0% {
-moz-transform:rotateY(-1deg);
}
100% {
-moz-transform:rotateY(360deg);
}
}
#keyframes coinflip {
0% {
transform:rotateY(0deg);
}
100% {
transform:rotateY(360deg);
}
}

Animate LENGTH of border-bottom

I have a navbar. On hover of any of it menu item I want to have the exact same effect of border-bottom animation as in here (See how the border or menu items at the top-left animates when you hover them.)
I tried to find similar asked questions on stackoverflow and also on google but I didn't find anything helpful.
Any help is really appreciated.

Well, it was as easy as inspecting the web with the developer tools. What they do in that page is to create an element inside the menu using the :before pseudo-element. On hover they use CSS transforms (scale) to change the length.
jsfiddle.
span
{
display: inline-block;
padding: 6px 0px 4px;
margin: 0px 8px 0px;
position: relative;
}
span:before
{
content: '';
position: absolute;
width: 100%;
height: 0px;
border-bottom: 1px solid black;
bottom: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
}
span:hover:before
{
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}

You can't have the border a different length to the element that it surrounds. However you can achieve a similar effect using just CSS - with a pseudo element. How about something like the following:
div:after{
position:absolute;
bottom:0;
left:50%;
height:1px;
width:0%;
background-color:#444;
display:block;
content:'';
transition:0.3s;
}
div:hover:after{
left:0;
width:100%;
}
JSFiddle

Its not border-bottom, it is done using css pusedo element :before
.navigation li a::before {
position: absolute;
bottom: -1px;
left: 0;
content: "";
width: 100%;
height: 1px;
background-color: #fff;
display: block;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
transform: scaleX(0);
}
.navigation li a::before {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
transform: scaleX(1);
}