I am using owl carousel spotlight with scale effect.
The overflow:hidden for the outer div is not working in IE11 during the scale transition
.spotlight{
border: 1px solid red;
height: 200px;
overflow: hidden;
}
img{
transition: all ease 2s;
-ms-transform: scale(1);
transform: scale(1);
}
.active img{
-ms-transform: scale(1.5);
transform: scale(1.5);
}
<div class="spotlight">
<div class="owl-carousel owl-theme">
<div class="item"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="item"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="item"><img src="https://placeimg.com/640/480/any" alt=""></div>
</div>
</div>
<script>
$(function(){
$('.owl-carousel').owlCarousel({
loop:true,
autoplay: true,
items: 1,
margin:10,
nav:true,
animateOut: 'fadeOut'
});
})
</script>
Fiddle - https://jsfiddle.net/jt2wLx6v/7/
IE11 has a lot of issues and this is one of them. here is a link to an already answered similar question that could help you. Let me know
Overflow property not working in IE 11
Related
I'm in the middle of project where I used transition property to delay filter blur. For some reason the timing function is not working. What could be the reason? Here is my code:
.project-tile img {
max-width: 100%;
max-height: auto;
filter: blur(1px);
-webkit-filter: blur(1px);
transition: all 500ms linear;
}
.project-tile img:hover {
filter: blur(0px);
-webkit-filter: blur(0px);
transition: all 500ms linear;
}
HTML:
<section id="projects">
<div class="container">
<div class="projects-text">
<h2>My Recent Work</h2>
<p>Here are a few recent projects of mine:</p>
</div>
<div class="grid-3">
<div class="project-tile" id="project-tile-1">
<img src="images/project-1.png" alt="project">
<div class="project-title">Vegan Survey Form</div>
<p>This is a survey about vegan diet.</p>
See Website
</div>
<div class="project-tile">
<img src="images/project-2.png" alt="project">
<div class="project-title">Documentation Page</div>
<p>It's a reference page for learning CSS.</p>
See Website
</div>
<div class="project-tile">
<img src="images/project-3.png" alt="project">
<div class="project-title">Peter the Rabbit</div>
<p>It's a landing page for Peter the Rabbit</p>
See Website
</div>
</div>
</div>
</section>
.project-tile img {
max-width: 100%;
max-height: auto;
filter: blur(5px);
transition: filter .5s ease;
}
.project-tile img:hover {
filter: blur(0px);
}
<div class="project-tile">
<img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" />
</div>
I'm looking into CSS transforms and I cant get this one part to work.
#photo-container img {
transition: transform 2s, transform-origin 2s;
}
#container-1 img:hover {
transform: rotate(45deg);
transform-origin: 0 0;
}
#container-2 img:hover {
transform: rotate(1.5turn);
transform-origin: 50%, 50%;
}
#container-3 img:hover {
transform: scale(1.5);
transform-origin: 0 0;
}
<div class="photo-container" id="container-1">
<div class="photo">
<img src="http://placehold.it/100x100" alt="">
<div class="grey"></div>
epicface
</div>
</div>
The three classes HTML elements are the same as the one posted below.
My question is that say I change the transform origin to 0 0, and it has a transform set to rotate, when the rotate occurs and finishes, instead of returning to its original position the same way it did to get there, it recenters itself, then goes to that point that was specified in the rotate function and does it from there.
Is there something I missed here or is this the normal functionality?
Edit. i stuffed something up. sorry to bother
Try to add transform-origin to images without hover. And change #photo-container to .photo-container I can't see another problem with it.
.photo-container {
display: inline-block;
}
.photo-container img {
transition: transform 2s, transform-origin 2s;
transform-origin: 0 0;
}
#container-1 img:hover {
transform: rotate(45deg);
}
#container-2 img:hover {
transform: rotate(1.5turn);
}
#container-3 img:hover {
transform: scale(1.5);
}
<div class="photo-container" id="container-1">
<div class="photo">
<img src="http://via.placeholder.com/100x100" alt="">
<div class="grey"></div>
epicface
</div>
</div>
<div class="photo-container" id="container-2">
<div class="photo">
<img src="http://via.placeholder.com/100x100" alt="">
<div class="grey"></div>
epicface
</div>
</div>
<div class="photo-container" id="container-3">
<div class="photo">
<img src="http://via.placeholder.com/100x100" alt="">
<div class="grey"></div>
epicface
</div>
</div>
I have the following CSS:
.element{
position:relative;
transition:all 1s;
-webkit-transform: rotateX(1deg) rotateZ(1deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
}
.spun{
.element{
top:260px;
-webkit-transform: rotateX(45deg) rotateZ(45deg) rotateY(0deg);
}
}
and HTML
<div class="element" id="element-1">
<div class="graphic-wrap">
Text 1
</div>
</div>
<div class="element" id="element-2">
<div class="graphic-wrap">
Text 2
</div>
</div>
<div class="element" id="element-3">
<div class="graphic-wrap">
Text 3
</div>
</div>
When I add a class of spun to the body, everything jumps before moving into position. You can see it actually goes off the screen, even though if you compare the position of where it starts, and where it ends, they are really similar:
Demo: http://codepen.io/EightArmsHQ/pen/dadff4f8e9f63e9f825693865d1c9354
If, however I don't add the spun class, and instead gradually increment the values in developer tools, it gradually moves how I want it to.
How can I prevent everything from jumping?
This is because the .element doest have an initial top position so there is no state for it to transform from.
Simply give the .element a starting position. Eg:
$('body').click(function(){
$(this).toggleClass('spun');
})
.element {
top: 0px;
position: relative;
transition: all 1s;
transform: rotateX(1deg) rotateZ(1deg) rotateY(0deg);
transform-style: preserve-3d;
transform-origin: 50% 50%;
}
.spun .element {
top: 260px;
transform: rotateX(45deg) rotateZ(45deg) rotateY(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element" id="element-1">
<div class="graphic-wrap">
Text 1
</div>
</div>
<div class="element" id="element-2">
<div class="graphic-wrap">
Text 2
</div>
</div>
<div class="element" id="element-3">
<div class="graphic-wrap">
Text 3
</div>
</div>
On hover, I'm trying to change the opacity of the main parent to darken the main image, but I want to show another image over it in full opacity. Here's what I tried, but it's not working.
<div class="masonry-item">
<div class="masonry-item1">
<a href="#" class="image">
<div class="caption">
<h3><img src="blah" /></h3> <!-- DARKEN THIS -->
</div>
<img src="blah" /> <!-- KEEP FULL OPACITY -->
</a>
</div>
</div>
my css:
.masonry-container .masonry-item .image:hover .caption {
opacity: 1;
}
.masonry-container .masonry-item a.image:hover img {
opacity: .2; /* this seems to darken everything, but when removed darkening doesn't work */
}
.masonry-container .masonry-item1:hover {
background-color: rgba(222,222,222,.5);
z-index:98;
}
Here's an example of what I'm trying to do:
http://screencast.com/t/7qDUmCJMNd
Are you looking for something like this?:
See JSFiddle
HTML:
<div class="masonry-item">
<div class="masonry-item1">
<div class="caption">
<h3><img id="image1" src="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" /></h3> <!-- DARKEN THIS -->
</div>
<img id="image2" src="http://laurafranksblog.files.wordpress.com/2013/04/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" /> <!-- KEEP FULL OPACITY -->
</div>
</div>
CSS:
.masonry-item1 {
background-color: #000;
position: relative;
height: 500px;
}
.masonry-item1:hover #image1 {
opacity: .2;
transition: all 1s;
}
/* This is just to get the images to overlap, you don't need this if you're doing it another way */
#image1, #image2 {
position: absolute;
}
Here is my solution. Although there is no darken, I believe you could make it as #mikelt21's answer.
<div class="masonry-item">
<img id="i1" src="https://cdn0.iconfinder.com/data/icons/business-and-finance-9/250/vector_265_07-01-128.png" />
<img id="i2" src="https://cdn0.iconfinder.com/data/icons/business-and-finance-9/250/vector_265_20-01-128.png" />
</div>
<style>
img{
position: absolute;
top:0;
left:0;
transition: all 1s;
}
div:hover #i1{
opacity:1;
}
div:hover #i2{
opacity:0;
}
#i1{
opacity:0;
}
#i1:hover{
opacity:1;
}
</style>
Here is the example in action
Can someone help me to center my text using javascript or in css?
I'm using bootstrap on this.
This is my html code
<header id="home">
<div class="container">
<div class="row banner" style="margin-top: 0px;">
<div class="banner-text">
<h1 class="responsive-headline wow zoomIn animated" style="font-size: 72px; visibility: visible; animation-name: zoomIn;">I'm <span>Alyssa Reyes</span></h1>
<h3 class="wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">I'm a passionate <span>Web Designer</span> and <span>Developer</span> creating modern and responsive design for <span>Web</span> and <span>Mobile</span>. <br> Let's start and learn more about me.</h3>
<hr>
</div>
</div>
</div>
</header>
Thanks
You can use text-align property
<h1>Alyssa Reyes</h1>
css
h1{
text-align:center;
}
Demo of your page
if you want to center vertically, you can use
.banner-text {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
demo