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;
}

How to create Timer Progress bar as shown below in GIF?

I want to create animated progress as below, but the thing is it is not working properly on safari browser
The css property which I used is:
.prgoressBar {
width: 100%;
margin: 0 auto;
height: 22px;
background-color:#BBBBBB;
overflow: hidden;
}
.prgoressBar div {
height: 100%;
text-align: right;
padding: 0;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 100%;
background-color: #185A8D;
box-sizing: border-box;
color:#fff;
-webkit-transition: width 1s linear;
-moz-transition: width 1s linear;
-o-transition: width 1s linear;
transition: width 1s linear;
}
<div id="QM_progressBar" class="prgoressBar">
</div>

Try using the 'transform: scaleX()' instead of changing the width. Transform uses to run better with transition, maybe that's why Safari is freaking out.
I don't have Safari installed right now, so please check if this codepen works: https://codepen.io/thiagoberrutti/pen/GRmLzZK.
In the codepen I used transition but in this snippet I tried with animations instead, see if one of them can work on Safari:
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear forwards;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
<div class="progress-container">
<div class="progress" style="--time:5s"></div>
</div>

CSS tile flip on hover

I have some Div Boxes how can i get them flipped on hover? I tried already some examples i found but i cant get it working? Can someone please help me?
.kachel_a_image_1 {
height:150px;
width:150px;
margin:auto auto;
margin-top:15px;
background:red;
}
.kachel_wrapper {
margin: auto auto;
width: 90%;
min-height: 450px;
margin-top: 55px;
text-align: center;
padding:10px;
padding-top:30px;
padding-bottom:20px;
}
.kachel_text {
font-size:10px;
color:white;
line-height:15px;
text-align:center;
}
.kachel {
height: 180px;
width: 180px;
margin-top: 20px;
margin-left: 58px;
background: #6e7176;
display: inline-block;
margin-bottom:30px;
}
<div class="kachel"><div class="kachel_a_image_1"></div><div class="kachel_text">Social</div></div>
I only want to use Css and no JS if its possible. Can someone explain me how this works or giving me a really simple example :S ?

Use transform:
.kachel:hover{
transform: rotateX(150deg);
}
more Information: http://www.w3schools.com/css/css3_3dtransforms.asp
Also if you want to add a duration to the animation use transition-duration
.kachel{
transition-duration: 5s;
}
for changing the content after the hover use the pseudo element :after and the attribute content.
For example:
.kachel:hover:after{
content: 'hovering';
}
You may have to change it a bit, i haven't tested it.

Using transition and backface-visibility.
Probably the best soultion is to use simple transform and backface-visibility. jsfiddle
.front, .back{
width: 100px;
height: 100px;
}
.front{
background-color: blue;
}
.back{
background-color: red;
background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
background-size: cover;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 100px;
height: 100px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
</div>
<div class="back">
</div>
</div>
</div>
Using #-webkit-keyframe
Another approach is to use animation and #-webkit-keyframes. However this will run the animation one time initially. (jsfiddle)
.box, .wrapper {
width: 100px;
height: 100px;
position: absolute;
}
.back {
transform: rotateY(90deg);
background-color: red;
-webkit-animation: in 0.2s forwards;
animation in 1s forwards;
-webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
animation-delay: 0.2s;
}
.front {
transform: rotateY(90deg);
background-color: blue;
-webkit-animation: out 0.2s forwards;
animation out 0.2s forwards;
background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
background-size: cover;
}
.wrapper:hover .box.back {
-webkit-animation: out 0.2s forwards;
animation: out 0.2s forwards;
}
.wrapper:hover .box.front {
-webkit-animation: in 0.2s forwards;
animation: in 0.2s forwards;
-webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
animation-delay: 0.2s;
}
#-webkit-keyframes in {
from {
-webkit-transform: rotateY(90deg);
}
to {
-webkit-transform: rotateY(0deg);
}
}
#-webkit-keyframes out {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(90deg);
}
}
<div class="wrapper">
<div class="box back"></div>
<div class="box front"></div>
</div>

For this I would use backface-visibility in conjunction with transform
<div class="container">
<div class="box front">image</div>
<div class="box back">Social</div>
</div>
CSS:
.container {
width: 180px;
height: 180px;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
color: white;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front {
background: red;
z-index: 2;
}
.back {
z-index: 1;
background-color: green;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color:white;
}
.container:hover {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
Here's a JS fiddle
EDIT: The above fiddle has been edited to have an outer wrapper which initiates the flip. This ensures that the animation doesn't jitter.
.wrapper {
width: 180px;
}
.wrapper:hover .container {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

Disabling :hover during Css animation [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
so I have got a sidebar nav that when the page loads, it slides out of the screen, and then when the user hovers over the area, the nav slides back on screen. However, when the nav slides off, if the user hovers over the nav during the slide off animation, the nav starts to flicker in and out as it tries to do both animations. I am wondering if there is a way to prevent this and/or disable the :hover during the slide out animation?
Sidebar asp.net
<div class="col-sm-3 col-md-2 sidebar slider">
<h5 style="font-family: Helvetica; text-transform: uppercase">Releases</h5>
<asp:CheckBoxList runat="server" ID="releaseStatusFilter" AutoPostBack="true" RepeatDirection="Horizontal" CellPadding="6" Height="5" style="margin-left:-10px">
<asp:ListItem Text="Future" Value ="Future" Selected="true"></asp:ListItem>
<asp:ListItem Text="Current" Value ="Current" Selected="true"></asp:ListItem>
<asp:ListItem Text="Completed" Value ="Completed" Selected="false"></asp:ListItem></asp:CheckBoxList>
<script type="text/javascript"></script>
<asp:ListView runat="server" ID="releaseList" style="float:left;">
<ItemTemplate>
<ul class="nav navbar nav-sidebar goo-collapsible" >
<li><a href='<%# "Release.aspx?rn="+ Eval("releaseNumber") %>'><%# Eval("releaseNumber") + " " + Eval("releaseShortName") %></a></li>
</ul>
<script type="text/javascript">
var param = location.search.split('rn=')[1]
param = param.split('%20').join(' ')
$('ul').find('a[href="Release.aspx?rn=' + param + '"]').parents('li').addClass('active');
</script>
</ItemTemplate>
</asp:ListView>
</div>
css
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
font-size: 12px;
position: fixed;
top: 120px;
width: 175px;
bottom: 0;
left: 0px;
display: block;
padding: 10px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #ccc;
border-right: 1px solid #eeeeee;
-webkit-animation: bannermoveout 0.5s linear both;
animation: bannermoveout 0.5s linear both;
}
}
#keyframes bannermoveout {
0% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(-92px, 0px, 0px);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(-185px, 0px, 0px);
animation-timing-function: ease-in-out;
}
}
#-webkit-keyframes bannermoveout {
0% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(-92px, 0px, 0px);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(-185px, 0px, 0px);
animation-timing-function: ease-in-out;
}
}
.sidebar:hover {
-webkit-animation: bannermove 0.5s linear both;
animation: bannermove 0.5s linear both;
}
#keyframes bannermove {
0% {
transform: translate3d(-185px, 0px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(-92px, 0px, 0px);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: ease-in-out;
}
}
#-webkit-keyframes bannermove {
0% {
transform: translate3d(-185px, 0px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(-92px, 0px, 0px);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: ease-in-out;
}
}
So i managed to fix it by using jquery to animate the sidebar menu instead of css. Thanks everyone for you help!
Jquery:
$(document).ready(function () {
$(".slider").animate({
left: '-185px'
}, "fast")
$("#slidebody").animate({
left: '0px'
}, "fast")
.queue(function () {
$(".slider").hover(function () {
$(".slider").stop().animate({ left: '0px' });
$("#slidebody").stop().animate({ left: "60px" });
$(this).dequeue();
}, function() {
$(".slider").stop().animate({ left: '-185px' });
$("#slidebody").stop().animate({ left: "0px" });
});
});
});
**The slidebody tag was just so that i can shift the container so that the nav didnt overlap the container. **

Maybe by using the .stop() function. Check this out : http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

Try the following CSS, rewritten to use transitions (I've removed the #mediaquery):
.sidebar {
font-size: 12px;
position: fixed;
top: 20px;
width: 175px;
bottom: 0;
left: 0px;
display: block;
padding: 10px;
overflow-x: hidden;
overflow-y: auto;
background-color: #ccc;
border-right: 1px solid #eeeeee;
/* v magic starts there v */
transition: ease-in-out 0.5s transform;
-webkit-transition: ease-in-out 0.5s transform;
transform: translate3d(-185px, 0px, 0px);
-webkit-transform: translate3d(-185px, 0px, 0px);
}
.sidebar:hover {
transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
}
<div class="col-sm-3 col-md-2 sidebar slider">
<h5 style="font-family: Helvetica; text-transform: uppercase">Releases</h5>
</div>
You are hammering a screw! It isn't meant for being nailed, but it gets the job done. But not as well as a nail would.
Transitions were designed for this, and not animations.
Animations are meant to animate the element.
Transitions are meant for smoothly transition between states.
Besides, this is so much shorter!
As an optimization, I would use margins instead.
Like the following:
.sidebar {
font-size: 12px;
position: fixed;
top: 20px;
width: 175px;
bottom: 0;
left: 0px;
padding: 10px;
overflow-x: hidden;
overflow-y: auto;
background-color: #ccc;
border-right: 1px solid #eeeeee;
/* v magic starts there v */
transition: ease-in-out 0.5s margin-left;
-webkit-transition: ease-in-out 0.5s margin-left;
margin-left:-185px;
}
.sidebar:hover {
margin-left: 0px;
}
<div class="col-sm-3 col-md-2 sidebar slider">
<h5 style="font-family: Helvetica; text-transform: uppercase">Releases</h5>
</div>

You can always try unbinding the hover event with jQuery. When you do this, you're essentially telling the element to no longer respond to an event until you rebind it. Here's a really general example:
//when the animation begins, unbind the hover event
$("sidebar").bind("animationstart", $(".sidebar").unbind("hover"));
//now, when the animation ends, rebind the hover event and call the function (in this case fxn())) that should fire on the hover event
$("sidebar").bind("animationend", $(".sidebar").bind("hover", fxn));
Does that help?

Display Dialog Box once every 3 hours

Works on my website but want to it to show only once per 2-3 hours:-
https://www.helpingtechie.com
This not my code just download from a website which gave me.
I think cookies will be needed to add.
Code Used:-
.guestwarn-mask{
position:absolute;
background:#fff;
opacity:0.5;
filter:alpha(opacity=50);
z-index: 4;
overflow: hidden;
}
.guestwarn-layout{
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
-moz-transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
-ms-transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
-o-transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
position:absolute;
border:1px solid #eee;
background:#fff;
box-shadow: 1px 2px 4px rgba(100,100,100,0.1);
display:none;
z-index:5;
}
.guestwarn-layout-animate{
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.guestwarn-layout-close{
-webkit-transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
-moz-transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
-ms-transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
-o-transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
top:-300px !important;
}
.guestwarn-content{
position:relative;
color:#555;
overflow:hidden;
}
.guestwarn-title{
position:absolute;
left:0px;
top:0px;
height:40px;
width:100%;
overflow:hidden;
background:#eee;
font:normal 16px Microsoft Yahei;
color:#fff
}
.guestwarn-title span{
display:block;
float:left;
padding:10px 20px;
background:#08c;
}
.guestwarn-close{
position:absolute;
right:0px;
top:0px;
background:#E04343;
display:block;
text-decoration:none;
font-family:Tahoma;
font-size:20px;
line-height:37px;
height:40px;
width:40px;
text-align:center;
color:#fff
}
.guestwarn-close:hover{
opacity:0.8;
filter:alpha(opacity=80);
}
.guestwarn-html{
padding:50px 20px 20px 20px;
font:normal 16px Microsoft Yahei;
line-height: 150%;
text-align:left;
}
.guestwarn-html a{
color:#58f
}
<script src="https://www.helpingtechie.com/jscripts/jquery.guestwarn.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$.guestwarn({
mask:true,
height: 'auto',
title:'Dear Guest',
html:'If you read this, it means you are not registered. <br>Click here to register in a few simple steps, you will enjoy all features of our Forum.',
callback:function(){
console.log('CALLBACKS')
}
});
});
</script>

if i understood your "question" corectly... This can help:
$(function(){
setInterval(function() {
$.guestwarn({
mask:true,
height: 'auto',
title:'Dear Guest',
html:'If you read this, it means you are not registered. <br>Click here to register in a few simple steps, you will enjoy all features of our Forum.',
callback:function(){
console.log('CALLBACKS')
}
});
}, 10800000);
// 10800000 is 3 hours in miliseconds
});