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;
}
Related
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>
I'm a beginner to jquery. I want to make a simple fadeindown when I click a button, but from the above the screen,e.g. minus top value. But what I get is only sliding in the page, not from above. And it only works once when I load the html. After that, opacity is the only one working. Here's the sample code:
#Page {
opacity: 0;
width:70%;
min-height: 300px;
background:white;
text-align: center;
border-radius: 20px;
position:relative;
padding:20px;
margin:0 auto;
}
in document.ready(), when I load the html
$("#Page").position().top=$("#Page").outerHeight()*-1;
$("#Page").animate({top:$(".row").outerHeight(),opacity:'1'},1500);
and the .click function
$("#Page").css('opacity','0');
$("#Page").position().top=$("#Page").outerHeight()*-1;
$("#Page").animate({top:$(".row").outerHeight(),opacity:'1'},1500);
it seems only in document.ready that my fadeindown works. Anyone know the reason?
N.B: I try it only in my browser,not hosting it,not even at localhost
Just use css:
#Page {
position: relative;
top: 0;
opacity: 1;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
}
.hidden-element {
position: relative;
top: -100px;
opacity: 0;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
And then JQuery to hide element:
$("#Page").addClass('hidden-element');
And to show:
$("#Page").removeClass('hidden-element');
I came across this functionality
http://themes.leap13.com/wiz/
where if you hover the mouse over a box, the image will start scrolling within that box.
How does this plugin is called? Any code examples on how to do it?
This can be achieved without any jquery. For instance
.screen {
width: 500px;
height: 300px;
display: inline-block;
margin: 10px;
padding-top: 12px;
position: relative;
margin-bottom: 80px;
text-decoration: none;
}
.screen div {
display: inline-block;
width: 500px;
height: 300px;
background-position: center top;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
.screen:hover div {
background-position: center bottom;
-webkit-transition: all 10s;
-moz-transition: all 10s;
-ms-transition: all 10s;
-o-transition: all 10s;
transition: all 10s;
}
.screen h2,
.screen h2 a {
font-size: 17px;
color: #fff;
font-weight: 300;
position: absolute;
bottom: -40px;
text-align: center;
width: 100%;
}
<div class="screen">
<div style="background-image:url(http://themes.leap13.com/wiz/wp-content/uploads/2014/10/restaurant-wiz1.jpg);"></div>
<h2>Some text</h2>
</div>
Basically all you need is a long image, and you add a transition on it to make it move up on hover (you're changing background position).
You could add easing to this, delay on hover, what ever your heart desires :D (within the realm of available CSS3 code ofc).
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.
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);
});