Hello
I have this web site www.acigaiabeta.esy.es, that im trying to align the images of the carousel to the center vertically, but it´s always stuck to the top.
I even tryed to folow this tip How to vertically align an image inside div, but still didnt change place.
On big images theres is no big deal, but with small images there is a problem, and the images sizes are random.
what am i missing?
.carousel .item {
vertical-align: middle;
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
vertical-align: middle;
max-width: 100%;
height: auto;
margin: auto;
top:auto;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
Im only trying by css i tryed using the top, the vertical-align: middle like on the like showed above nothing works.
Here's the CSS you need:
#myCarousel img {
position: absolute;
max-width: 100%;
max-height: 100%;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Try it.
.first-slide {
position: abolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
Related
I have a css transition so that when someone hovers over an image, the h2 will grow. It does kind of work, but the in addition to growing the h2 is also moving across the div. This has never happened to me before and I can't figure out why. You can see it's behavior here, if you scroll to the bottom of the page and hover over Our Story and Our Team: https://katherinemade.com/staging/mission-vision-values/
Here is my html:
<div class="img-relative-position">
<h2 class="over-image-text">Our Story</h2>
<img />
</div>
And my css:
.img-relative-position {
position: relative;
}
.over-image-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-relative-position h2 {
transition: all .2s ease-in-out;
}
.img-relative-position:hover h2 {
transform: scale(1.5);
}
Does anyone know what could be causing my h2 to move vertically across the div, and how I can keep it center but still grow?
You can do like this
.img-relative-position {
position: relative;
}
.over-image-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-relative-position h2 {
transition: all .2s ease-in-out;
}
.img-relative-position:hover h2 {
transform: scale(1.5);
}
<div class="img-relative-position">
<div class = "over-image-text"> //new div
<h2 class="over-image-text-cstm">Our Story</h2>
</div>
<img />
</div>
i think you should scale a "parent" Container so if you create something like this
<div class="img-relative-position"> // <-- the Image
<div class="scale-this-on-hover"> // <-- new container this one has to be scaled
<h2 class="over-image-text">Our Story</h2>
<img />
</div>
</div>
No need To add scale property to increase text size
.img-relative-position:hover h2 {
/* transform: scale(1.5); */ // Remove This Line
font-size: 60px; // Add font-size
}
Thanks
I think you are missing transform-origin: center on h2. I have made a snippet for you. Have a look.
Thanks me later.
* {
box-sizing: border-box;
}
.wrap {
margin: 40px;
width: 300px;
height: 200px;
line-height: 200px;
background: green;
color: #fff;
text-align: center;
}
.wrap h2 {
transition: .3s ease;
transform-origin: center center;
}
.wrap:hover h2 {
transform: scale(1.5);
}
<div class="wrap">
<h2>Hello Test</h2>
</div>
For Extra Hover Effect You Can use This Css I Hope You Like It :)
.img-relative-position {
position: relative;
overflow: hidden;
}
.over-image-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 2;
transition: all 0.5s ease-in-out;
}
.img-relative-position:hover h2 {
font-size: 60px;
}
.img-relative-position a {
display: block;
}
.img-relative-position img {
transition: all 0.5s ease;
}
.img-relative-position:hover img {
transform: scale(1.2) rotate(-5deg);
}
Thanks
This is what each slide looks like:
.slideImage {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.slideOverlay {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
justify-content: center;
}
.slideImage:hover {
opacity: 0.3;
}
.slideOverlay:hover {
opacity: 1;
}
<div className="each-slide">
<div className="slideImage" style={{ 'backgroundImage': `url(${slideImages[0]})`}}>
</div>
<div className="slideOverlay">
<p>OverlayText</p>
</div>
</div>
There's three slides. The image overlay text only appears on the 2nd slide and the 2nd slide doesn't fade out. Can someone tell me why that is?
The answer is .each-slide's position needed to be relative
When I hover the p tag and add a letter-spacing on it, it messes up the entire text. I wanted to hover it and it stays in the same position with the letter-spacing on it.
#text {
position: absolute;
transform: translate(-50%, -50%);
left: 40%;
top: 50%;
font-size: 2em;
transform: rotate(90deg);
}
#text:hover {
letter-spacing: 10px
}
<p id="text">sample text rotation</p>
Just add white-space: nowrap
BTW, your second transform rewrites the first one.
The correct use is transform: translate(-50%, -50%) rotate(90deg);
#text {
position: absolute;
transform: translate(-50%, -50%) rotate(90deg);
left: 40%;
top: 50%;
font-size: 2em;
white-space: nowrap;
}
#text:hover {
letter-spacing: 10px
}
<p id="text">sample text rotation</p>
The flickering happens because the transform-origin is wrong. You're rotating the text, so you should take the original transform-origin into account (which is from left to right).
See this updated code snippet for the result.
.text {
position: absolute;
transform-origin: top left;
left: 70%;
top: 20%;
font-size: 2em;
transform: rotate(90deg);
}
.text:hover {
letter-spacing: 10px;
}
<p class="text">sample text rotation</p>
Couple of things:
You have 2 transform tags on your css
You still will need more spacing padding so the hover is not flickering
Also Im sure you wanted a transition so try this:
#text {
transition: letter-spacing 0.5s;
}
#text {
display: block;
padding: 0;
position: absolute;
left: 40%;
top: 50%;
font-size: 2em;
transform: translate(-50%, -50%) rotate(90deg);
transition: letter-spacing 0.5s;
}
#text:hover {
letter-spacing: 10px
}
<p id="text">sample text rotation</p>
You will probably need more block /width /spacing so it can get the right setup but thats all you...
I am trying to add a sweep to the right animation on my image so that when you hover the image it sweeps to the right and it shows the text on hover as well. I got this to work just find with buttons but I am lost on how to go about doing this. This is what I have so far with my code:
.portfolio-box {
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
/*object-fit: contain;*/
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.5s ease-out;
}
.portfolio-mask:hover:after {
transform: scaleX(1);
}
.portfolio-mask:hover {
opacity: .85;
color: white;
}
<div class="portfolio-box">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="Coffee">
<div class="portfolio-mask">
<p class="portfolio-text">Design Mock up</p>
</div>
</div>
I made some changes to your CSS to make it work smooth and without insane jumping when you hover left side of the image. Here is the CSS and below is the description what changes and why I have made.
.portfolio-box {
position: relative;
overflow: hidden;
display: inline-block;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
transition: all 0.5s ease-out;
display: block;
/*object-fit: contain;*/
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: all 0.5s ease-out;
}
.portfolio-box:hover .portfolio-mask {
transform: scaleX(1);
opacity: .85;
color: white;
}
Changes I made:
Added display: inline-block; for .portfolio-box - to make it be as big as image inside.
Added display: block; for image to prevent 2-3px empty space under image when it is displayed inline (default).
Added transition: all 0.5s ease-out; for image, to prevent jumping when change position.
I changed transition from transform to all to animate not only move but opacity of mask container.
Animation are now added for hover on .portfolio-box, because it is static container, which is very important for effect you want to achieve - if you add animation on image hover then you will get infinite animation, because when you hover your mouse above image then it will slide to the right and after then it will be no longer hovered so it will go back to initial state and then it will be hovered again so it will go to the right... repeat initity ;)
I think from your description that what you are trying to do is a transform. For this, just add a translateX transform (of your desired size) to the css.
Hope this helps.
.portfolio-box {
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
/*object-fit: contain;*/
}
.portfolio-box img.animate:hover{
transform: translateX(5em);
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.5s ease-out;
}
.portfolio-mask:hover:after {
transform: scaleX(1);
}
.portfolio-mask:hover {
opacity: .85;
color: white;
}
<div class="portfolio-box">
<img class="animate" src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="Coffee">
<div class="portfolio-mask">
<p class="portfolio-text">Design Mock up</p>
</div>
</div>
The thing that I don't know how to get rid of or move is following: When I'm using the while loop I get inline blocks just the way I want, but there is a link on every element and therefor the blocks are in done <a href>, but that <a> element throws the design out of whack. Left and right margins are correct, but top and bottom ones are 16px too big due to the a element. So if I can somehow move the element on top over the images do let me know.
So I have this code:
<?php while( have_rows('vsi_projekti') ):
the_row();
?>
<div class="post-grid">
<a href="<?php echo $var1; ?>">
<div class="post-title-hover"><?php echo $var2 ?></div>
<img src="../something.jpg" class="thumbnail-custom-post" />
<img src="../something.jpg" alt="" class="post-grid-bg" />
</a>
</div>
<?php endwhile; ?>
With css being as follows:
.post-grid{
display: inline-block;
margin: 10px;
overflow: hidden;
border: 0;
background: #fff;
width: 31%;
position: relative;
}
.post-title-hover {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
color: #000;
overflow: hidden;
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
transform: translate(-50%, -50%);
font: 400 20px 'rajdhani', sans-serif;
text-align: center;
}
.post-grid-bg {
position: absolute;
left: 50%;
top: 48.5%;
opacity: 0;
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
transform: translate(-50%, -50%);
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
}
.post-grid:hover .post-grid-bg {
opacity: 1;
z-index: 3;
}
.thumbnail-custom-post {
position:relative;
}
Here is the screenshot of what I'm trying to hide:
At the bottom of the image there is about 10px that I don't want to show. And it is on every image.
Here is also fiddle
using css hide element/tag
.hide { opacity: 0; }
.hide { visibility: hidden; }
.hide { display: none; }
.hide { position: absolute; top: -9999px; left: -9999px; }
.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }
or try it
Try setting display:none to hide and set display:block to show.