We Keep Coding

Center image within div on hover

So I created a custom Instagram feed for my website and am trying to make the images enlarge to the center of the parent div on hover and am having difficulty achieving this.
I was able to sort-of make this happen earlier (and have since changed the code), but I have 2 rows of 4 images each being displayed and the ones on the ends (left or right) always get cut-off. It's like the containing div isn't wide enough. As of right now When you hover over the images, the image pops out but gets cut-off on ALL sides. I have tried many different things to make this happen to no avail.
I am using CSS to obtain the results, see code below. I am certain some of the code is redundant and confusing, so I apologize in advance! Thanks!
// Parent div
.instagram_feed {
overflow:hidden;
}
// This sets the sizing of the grid itself
#instagram-feed1 {
display: flex;
flex-wrap: wrap;
height: auto;
width: auto;
margin: 4em;
}
// Controls size of images in the grid
.instagram_feed .instagram_new {
width:25%;
float:left;
padding:0 0px 5px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.instagram_feed img.insta-image {
position: absolute;
left:0;
top:0;
object-fit: cover;
width:100%;
height:100%;
transition:all 0.3s ease0s;
-webkit-transition:all 0.3s ease0s;
-moz-transition:all 0.3s ease0s;
-ms-transition:all 0.3s ease0s;
-o-transition:all 0.3s ease0s;
}
.instagram_feed .insta-link {
position:relative;
display:block;
background:#232323;
padding-top:100%;
}
// Hover setttings
.instagram_feed .insta-image:hover {
opacity: 100;
background-color: rgb(41,47,51);
position:absolute;
transform: scale(2,2);
object-fit: cover;
display: block;
z-index:999;
visibility: visible;
transition-property: all;
-webkit-transition-property: all;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}

.instagram_feed {
overflow:hidden;
//position relative !!
position: relative;
}
.instagram_feed .insta-image:hover {
//center
left: 50%;
top:50%;
transform: translate(-50%, -50%) scale(2,2);
opacity: 100;
background-color: rgb(41,47,51);
position:absolute;
object-fit: cover;
display: block;
z-index:999;
visibility: visible;
transition-property: all;
-webkit-transition-property: all;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}

Grow line from center out on page load with CSS?

I am trying to accomplish the effect from this answer but without the text: Expand bottom border on hover
And know this can be accomplished by growing the entire div from the center as with here: http://jsfiddle.net/wNXLY/ but have no idea how to create this effect with line (i.e keeping the height static)
I have created my line here:
.line {
background: white;
width: 300px;
top: 10%;
height: 3.2px;
margin:auto;
position: relative;
}
And need to have the line grow from the center on page load. How can I do this?

You can use css animation with animation-fill-mode set to forwards, setting #keyframes width from 0% to n%, left from 50% to 5%
body {
width:100%;
}
div {
display:block;
position:absolute;
top:45%;
left:50%;
border-bottom:4px solid red;
width:0%;
text-align:center;
animation: line 2s linear forwards;
}
#keyframes line {
from {
left:50%;
width:0%;
}
to {
left:5%;
width:90%;
}
}
<div></div>

#keyframes line_animation {
from {
width: 0%;
}
to {
width:100%;
}
}
.line {
border-bottom: solid 3px #019fb6;
border-top-width: 0px;
animation-name: line_animation;
animation-duration: 4s;
animation-timing-function: linear;
}
Like this
<hr class="line" />

i have utilised display grid and SCSS to configure an authentic border animation
.top-border {
grid-area: tb;
// background: green;
border-bottom: $border-config;
width: 0%;
animation: horizontal-border-animation $animation-duration / 2 forwards;
animation-delay: $animation-delay;
}
.bottom-border {
grid-area: bb;
//to prevent being visible since it is going to be delayed
width: 0%;
// background: yellow;
border-top: $border-config;
animation: horizontal-border-animation $animation-duration / 2 forwards;
// because both right and bottom will start animating after top and left + the intitial delay
animation-delay: $animation-duration / 2 + $animation-delay;
}
#keyframes expand-border-width {
from {
width:0%;
}
to {
width:100%;
}
}
check my sample to gain an explicit clarification
https://codepen.io/ino0r/pen/eYEgvrZ

You don't need keyframes for this if you're just transitioning the effect.
<div class="line"></div>
.line {
width: 0%;
height: 1px;
position: absolute;
left: 50%;
background: #f00;
transition: all 1s;
}
.line:hover {
width: 100%;
left: 0%;
}

How to make a round mask over a image

This is my take using css only, but the image is not centred, and also the image get bigger not the mask
jsfiddle Demo
I want to achieve the same affect in here
http://jackietrananh.com/portfolio.php
He is using an image http://jackietrananh.com/img/sprite-s82d3b02845.png but how this can happen with pure css or js?
and without
clip-path

.avatar-frame{border: 2px solid #c7b89e;}
.avatar-frame,.avatar-frame img{
width: 50px;
height: 50px;
-webkit-border-radius: 30px; /* Saf3+, Chrome */
border-radius: 30px; /* Opera 10.5, IE 9 */
/*-moz-border-radius: 30px; Disabled for FF1+ */
}
more here
http://www.html5rocks.com/en/tutorials/masking/adobe/

With css you can set it as a background and positioning it to center:
background: url("http://media.trb.com/media/photo/2011-11/241153480-30235112.jpg") no-repeat center center;
Here's a demo:http://jsfiddle.net/shbnts90/3/

Try thisFIDDLE
.circle {
margin: 20px 0 0 20px;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
width:200px;
height:200px;
overflow: hidden;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.circle>img{
width:100%;
height:100%;
max-height:100%;
}
.circle:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

I would accomplish this as follows:
HTML:
<div class="round">
<img src="http://www.somebodymarketing.com/wp-content/uploads/2013/05/Stock-Dock-House.jpg"/>
</div>
CSS:
.round{
width:10%;
padding-top:10%;
overflow:hidden;
position:relative;
border-radius:50%;
}
img{
position:absolute;
top:50%;
left:50%;
min-width:100%;
height:100%;
transform:translate(-50%,-50%);
transition: 1s ease;
}
img:hover{
height:110%;
}
Example: CodePen

If you set the CSS for the image as a 50% border radius, it will create what is effectively a full circle mask around an image.
img {
border-radius: 50%;
}
Note, some of the original links in this original question expired, so I'm guessing a little about the intent here based on the dialog.

Expand the logo from a half

has anyone any idea if you can do this in jquery? Where clicking on a piece of the logo expands the rest? Example image:

Why use jQuery if this can be achieved using CSS?
HTML:
<div id='icon-wrapper'>
<img id='icon' alt='icon' src='http://i.stack.imgur.com/sKhJf.jpg?s=60&g=1'/>
<p>Text here</p>
</div>
CSS:
#icon-wrapper{
margin:0 auto;
height:110px;
width:110px;
overflow:hidden;
/* CSS Transitions */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#icon-wrapper:after{
content:"";
display:block;
width:100%;
clear:both;
}
#icon-wrapper:hover{
width:300px;
}
#icon-wrapper:hover #icon{
margin-left:200px;
}
#icon{
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
/* Position Absolute to put the icon on the top */
position:absolute;
z-index:10;
/* CSS Transitions */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#icon-wrapper p{
color:black;
font-size:35px;
font-family:arial, helvetica;
/* Fixed width and float left is needed */
width:200px;
float:left;
}
It's long but without using jQuery is a plus point.
Note that we need to use fixed width for the elements, especially for the paragraph.
UPDATE:
For transparent icon, we need to hide the text first, using opacity:0;. Then add CSS Transition so we have smooth effect on hover. Finally, show the text on hover with opacity:1;. But this trick has a bug, sometimes the text didn't 'hide' fast, so it's still shown for a time in the icon. The best solution is adding a background color to the icon, using the same color as the container background.
Updated CSS (transparent text):
#icon-wrapper:hover p{
opacity:1;
}
#icon-wrapper p{
/* ... */
opacity:0;
-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-ms-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
transition: all 2s ease-in;
}
Updated CSS (using background color on the icon):
#icon{
/* ... */
background:white;
}
Here is a jsFiddle
Here is an updated fiddle for transparent icon.
Here is an updated fiddle with background color added to the icon.

Not sure if this is something you want.
Check the demo here: http://jsfiddle.net/SdanM/4/
HTML:
<div id="container">
<div id="img">Hidden Element</div>
<div id="btn">Hover to expand</div>
<div>
CSS: hide the hidden element first
#container {
position: relative;
}
#img {
background-color: yellow;
position: absolute;
width: 100px;
height: 50px;
top: 50px;
left: 50px;
display: none;
}
#btn {
background-color: red;
position: absolute;
width: 50px;
height: 50px;
top: 50px;
left: 50px;
}
jQuery: move the blocks
$("#container").mouseenter( function() {
$("#img").animate({
left: "-=50",
width: "show",
}, 1000);
$("#btn").animate({
left: "+=50",
}, 1000);
});
$("#container").mouseleave( function() {
$("#img").animate({
left: "+=50",
width: "hide",
}, 1000);
$("#btn").animate({
left: "-=50",
}, 1000);
});

Convert jquery animation to CSS3

HTML:
<div id="slick-slidetoggle">wxyz</div>
<div id="slickbox" >abcd</div>​
JS
// hides the slickbox as soon as the DOM is ready (a little sooner that page load)
var hoverVariable=false;
var hoverVariable2=false;
$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
hoverVariable2=true;
$('#slickbox').slideToggle(600);
return false;
})
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
}, 1000);
})
$('#slickbox').mouseleave(function() {
hoverVariable=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
return false;
}, 1000);
})
$('#slickbox').mouseover(function() {
hoverVariable2=false;
hoverVariable=true;
})​
CSS
#slickbox {
background: black;
width:100px;
height: 135px;
display: none;
cursor:pointer;
color:white;
}
#slick-slidetoggle{
background: yellow;
width:100px;
height: 135px;
cursor:pointer;
color:black;
}
​
Now the above functionality is what I want to achieve using purely CSS, which is when I hover over the "wxyz" button "abcd" button should come down and stay visible even is mouse is moved away from "wxyz" for 3 secs.
I tried transition delay with display property but apparently that doesn't work on display property, then I tried position:absolute & visibility & transition delay of visibility, but then the appearance of button got delayed by 3 secs not the hidnig.
I want the "abcd" button to hide after 3 secs of moving the button away from "wxyz" using only CSS or CSS3

Here is an Example (Code here)
(I have written only -webkit, but you could add the other prefixes)
#test2 {
position:absolute;
z-index:1;
background: black;
width:100px;
height: 135px;
opacity: 0;
cursor:pointer;
color:white;
opacity:0;
-webkit-animation-duration: 600ms;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: both;
}
#test {
position:absolute;
z-index:2;
background: yellow;
width:100px;
height: 135px;
cursor:pointer;
color:black;
}
.container {
position:relative;
}
.container:hover #test2 {
opacity:1;
-webkit-animation-name: slideDown;
}
.container:not(:hover) > #test2 {
-webkit-animation-delay:1000ms;
-webkit-animation-name: slideUp;
opacity:1;
}
#-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(135px);
}
}
#-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(135px);
}
100% {
-webkit-transform: translateY(0);
}
}

Here is a cross browser solution:
Tested on OPERA-SAFARI-CHROME-MAXTHON-FIREFOX
HTML:
<div class="container">
<div id="test">wxyz</div>
<div id="test2" >abcd</div>
</div>
CSS:
#test {
width:100px;
height:100px;
background:yellow;
position:relative;
z-index:2;
}
#test2 {
top:-100px;
width:100px;
height:100px;
background:black;
color:white;
position:relative;
z-index:1;
}
.container:hover #test2 {
top:0px;
transition-property:top;
transition-duration:0.2s;
transition-timing-function: linear;
/* Firefox 4 */
-moz-transition-property:top;
-moz-transition-duration:0.2s;
-moz-transition-timing-function:linear;
/* Safari and Chrome */
-webkit-transition-property:top;
-webkit-transition-duration:0.2s;
-webkit-transition-timing-function:linear;
/* Opera */
-o-transition-property:top;
-o-transition-duration:0.2s;
-o-transition-timing-function:linear;
/* IE */
-ms-transition-property:top;
-ms-transition-duration:0.2s;
-ms-transition-timing-function:linear;
}
.container:not(:hover) #test2 {
top:-100px;
transition-property:top;
transition-duration:0.2s;
transition-timing-function: linear;
transition-delay: 3s;
/* Firefox 4 */
-moz-transition-property:top;
-moz-transition-duration:0.2s;
-moz-transition-timing-function:linear;
-moz-transition-delay:3s;
/* Safari and Chrome */
-webkit-transition-property:top;
-webkit-transition-duration:0.2s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:3s;
/* Opera */
-o-transition-property:top;
-o-transition-duration:0.2s;
-o-transition-timing-function:linear;
-o-transition-delay:3s;
/* IE */
-ms-transition-property:top;
-ms-transition-duration:0.2s;
-ms-transition-timing-function:linear;
-ms-transition-delay:3s;
}
Fiddle: http://jsfiddle.net/BerkerYuceer/2gVLX/

Use the transition to do it as below:
<head>
<style>
#outer {
width: 100px;
height: 50px;
background-color: green;
position: relative;
}
#innerOne {
width: 100px;
height: 50px;
background-color: blue;
}
#innerTwo {
width: 100px;
height: 50px;
background-color: red;
position: absolute;
top: -150px;
left: 100px;
}
#outer:hover #innerTwo {
top: 0px;
-webkit-transition: top 2s ease-out;
-moz-transition: top 2s ease-out;
-o-transition: top 2s ease-out;
transition: top 2s ease-out;
}
#innerTwo:not(hover) {
-webkit-transition: top 1s ease-in 3s;
-moz-transition: top 1s ease-in 3s;
-o-transition: top 1s ease-in 3s;
transition: top 1s ease-in 3s;
}
</style>
</head>
<body>
<div id="outer">
<div id="innerOne">wxyz</div>
<div id="innerTwo">abcd</div>
</div>
</body>
</html>