I have a carousel with images/descriptions in it and my height:auto does not work properly. Height computed is too big
JSBin: JSBin
I can only guess that this is because my .shadow class which is relative with height 150px.
Please take a look on it.
Edit: code as requested
This is result of one item from carousel
<div class="carousel2">
<div class="carousel">
<div class="owl-carousel owl-theme" id="owl-example" style=
"opacity: 1; display: block;">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style=
"width: 4092px; left: 0px; display: block; -webkit-transform: translate3d(0px, 0px, 0px); -webkit-transition: all 200ms ease; transition: all 200ms ease;">
<div class="owl-item" style="width: 341px;">
<div class="pc">
<div class="c">
<img alt="image" src=
"http://www.ramp-alberta.org/_system/ThumbnailCache/UserFilesImageAug~16~Site~1_004jpg.300.-1.-1108757834.jpg">
<div class="shadow">
<div class="description">
Event1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And here is my css
.carousel2
{
overflow: hidden;
/* height:400px; */
background-color: #344754;
}
.carousel
{
width: 1364px;
float: left;
height: auto;
}
.shadow
{
position: relative;
bottom: 150px;
left: 0;
right: 0;
background: rgba(222,103,21,0.7);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#B2344855', endColorstr='#B2344855');
height: 150px;
vertical-align: middle;
z-index: 1;
width: 100%;
text-align: center;
}
.pc{
/* border: blue 1px solid; */
width: 1%;
display: table;
margin: auto;
height: auto;
overflow: hidden;
}
.c
{
overflow: hidden;
}
.description
{
padding-top: 15px;
font-family: "FSRufus";
font-size: 30px;
font-weight: bold;
color: white;
}
.owl-item
{
overflow: hidden;
}
You should give class carousel2 a min-height so that CSS will know till what it needs to scale image. Try to use exact size images to save processing time. Also remove height from class Shadow. This should help.
Related
I wanted to know why my styles of class="project-borders" and class="project-overlay" are not applying to div elements of data-modal="modal3" and data-modal="modal6". These styles are applying to every div element where used, except these two. I don't understand what's the problem even though the classes are the same across every div element. You can see the styles by removing class="project-borders" from div elements of data-modal="modal3" and data-modal="modal6".
Here is the visual representation:- Codepen
Please any help would be appreciated.
My HTML:
<div class="projects">
<div data-modal="modal1" class="project-borders">
<div class="project-overlay">
<p>Coffee Grounds</p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="">
</div>
<div data-modal="modal2" class="project-borders">
<div class="project-overlay">
<p>Startup Employee Directory</p>
</div>
<img src="https://www.hofstra.edu/images/positioning/id-directories.jpg" alt="">
</div>
<div data-modal="modal3" class="project-borders">
<div class="project-overlay">
<p>Words Guessing Game</p>
</div>
<img src="https://images.newindianexpress.com/uploads/user/imagelibrary/2019/10/15/w900X450/PUBG_.JPG" alt="">
</div>
<div data-modal="modal4" class="project-borders">
<div class="project-overlay">
<p>Motorcycle Parallax</p>
</div>
<img src="https://cdp.azureedge.net/products/USA/ZERO/2020/MC/MCY/SR-F/50/BOARDWALK_RED/2000000002.jpg" alt="">
</div>
<div data-modal="modal5" class="project-borders">
<div class="project-overlay">
<p>Picture Portfolio</p>
</div>
<img src="https://media.wired.com/photos/598e35fb99d76447c4eb1f28/master/pass/phonepicutres-TA.jpg" alt="">
</div>
<div data-modal="modal6" class="project-borders">
<div class="project-overlay">
<p>Video Creator Portfolio</p>
</div>
<img src="https://storage.googleapis.com/proudcity/petalumaca/uploads/2020/01/video-infographic.jpg" alt="">
</div>
</div>
My SASS:
.projects{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 80%;
margin: 0 auto;
column-gap: 50px;
row-gap: 50px;
// margin-top: 60px;
padding-top: 6%;
img{
width: 100%;
height: 100%;
cursor: pointer;
}
}
.project-borders{
position: relative;
border: 2px solid #000;
img{
width: 100%;
height: 100%;
cursor: pointer;
position: absolute;
left: 10px;
top: 10px;
}
&::before{
position: absolute;
border: 2px solid #ffde59;
content: "";
display: block;
position: absolute;
top: 25px;
left: 25px;
right: -20px;
bottom: -20px;
}
.project-overlay{
position: absolute;
left: 10px;
top: 10px;
bottom: 0;
transition: .5s;
background-color: rgb(76, 72, 68);
transition: .5s ease;
width: 100%;
height: 100%;
opacity: 0;
& p{
position: absolute;
font-size: 20px;
top: 45%;
width: 100%;
text-align: center;
color: #fff;
transition: .5s;
opacity: 0;
}
}
&:hover .project-overlay{
cursor: pointer;
opacity: 1;
z-index: 1;
}
&:hover .project-overlay p{
cursor: pointer;
display: block;
opacity: 1;
z-index: 1;
}
}
Based on your codepen, it doesn't seem like the 3rd and 6th modals are the problem with the styles displaying. The real problem is that all the content in your modals are absolutely positioned which takes them out of the ordinary context of the document, which causes the project-borders containers to have a height that only consists of the borders. You'll need to define a fixed height for that container for things to display correctly like so...
.project-borders {
position: relative;
border: 2px solid #000;
height: 209px;
}
I've made a responsive image grid and am trying to add a hover effect to it so that the image gets a dark overlay and some text fades in on it. However, I've been having a tough time implementing it.
Here's my HTML structure.
<div class="tile">
<img src="some_image" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
And here's my CSS
.gallery .row .tile:hover ~ .tile img {
transform: scale(1.2);
}
However upon hovering over the image, it does not have the expected behaviour.
What's wrong?
EDIT
I got the hover effect to work and I can now fade in text.
Here's my code for that:
<div class="tile">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tagore_Gandhi.jpg/220px-Tagore_Gandhi.jpg" class="animate">
<div class="overlay">
<div class="text">Mahatma Gandhi</div>
</div>
</div>
CSS
.tile {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0.8);
}
.tile:hover .overlay {
opacity: 1;
}
This seems to work but I think it doesnt have a certain "feel" to it. So I need to add a scale effect to the image. How can I do that
Here is a jsFiddle that i think will help you to resolve your issue: https://jsfiddle.net/mcs3yn1x/
HTML
<div class="tile">
<img src="https://picsum.photos/200/300" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
CSS
.tile {
border: 2px solid black;
}
.tile:hover img {
transform: scale(1.2);
}
Edit
After hearing alittle more about your issue I have created the following jsFiddle: https://jsfiddle.net/f1gzonjr/4/
HTML
<div class="tile">
<div class="container">
<img src="https://picsum.photos/200/300" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
</div>
CSS
.tile {
position: relative;
top: 0px;
left: 0px;
height: 300px;
width: 200px;
overflow: hidden;
border: 2px solid black;
}
.container:hover img{
transform: scale(1.2);
}
.overlay{
position: absolute;
display: none;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
}
.overlay p {
position: relative;
text-align: center;
color: #fff;
}
.tile:hover .overlay{
display: block;
}
Here is an alternate solution. Not sure if its what you wanted.
.tile:hover img, .tile.hover img {transform: scale(1.2);}
Here is the original answer that I adapted: Change background color of child div on hover of parent div?
-----EDIT-----
To stop it scaling and breaking responsiveness you will need to add a container around the image and then set overflow to none.
HTML:
<div class="tile">
<div class="img-container"><img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/16C0E/production/_109089139_928b0174-4b3f-48ff-8366-d118afa1ed56.jpg" class="animate"></div>
<div class="overlay">
<p>Mahatma Gandhi</p>
CSS:
.img-container{
width: 500px;
height: 500px;
overflow: hidden;
}
.tile:hover img, .tile.hover img {
transform: scale(1.2);
}
See the codepen below for an example
https://codepen.io/jamesCyrius/pen/pooqwwv
Here is a code
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s; /* Animation */
width: 15px;
height: 15px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
<div class="zoom"></div>
I would like to add a link to an image that has an overlay applied to it. When users hover over the image they get an opaque overlay and text appear. This works great, however I also need users to be able to click that image and taken to a link.
I have pasted my code below - the overlay works but the link portion does not. I believe it's because the overlay is interfering. I tried changing the placement of the link but was unable to do so. I am able to make the '+' be the link, but ideally the entire image should link.
Any thoughts?
JSFiddle
.roomphoto:hover .img__description { transform: translateY(0); }
.roomphoto .img__description_layer { top: 30px; }
.roomphoto:hover .img__description_layer { visibility: visible; opacity: 1; }
.img__description_layer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #cdcbca;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .2s, visibility .2s;
}
.roomphoto {
height: 166px;
}
.img__description {
transition: .2s;
transform: translateY(1em);
z-index: 999;
}
.overlay {
position: relative;
}
.overlay:after {
position: absolute;
content:"";
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
}
.overlay:hover:after {
opacity: .8;
}
.blue:after {
background-color: #1a3761;
}
.img__description a {
color: #fff;
}
.roomselect {
clear: both;
float: none;
width: 100%;
max-width: 1000px;
margin: 0px auto;
padding-top: 20px;
}
.roomselect img {
width: 100%;
margin-bottom: -10px;
}
.room3 {
width: 32%;
text-align: left;
float:left;
}
<div class="roomselect"><div class="room3">
<div class="roomphoto overlay blue">
<a href="http://www.google.com">
<img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
</a>
<div class="img__description_layer">
<p class="img__description">
<span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span>
</p>
</div>
</div>
</div>
You need to rearrange your html in such a way that when you click on image, you are actually clicking on the anchor tag. I have made some changes to your html, let me know if these work. You might have to increase roomphoto height.
<div class="roomselect">
<div class="room3">
<a href="http://www.google.com">
<div class="roomphoto overlay blue">
<img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
<div class="img__description_layer">
<p class="img__description"><span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span></p>
</div>
</div>
</a>
</div>
</div>
I have a small bug that I can't seem to locate. In my snippet you can see how whenever you hover over the image, opactiy and an image scale takes place, as well as a box comes over the image. That is perfect, but my issue is whenever you hover over the text below it, the hover effect takes place over the image.
I can't seem to figure out how for the hover effect to only take place when the mouse is hovering over the image.
Any suggestions would be appreciated.
$('.home-img-block img').addClass(function() {
return (this.width / this.height > 1) ? 'wide' : 'tall';
});
#home-img-block-section {
width: 100%;
height: 900px;
}
#home-img-blocks {
width: 100%;
height: 750px;
}
.home-img-block {
width: 33.33%;
float: left;
display: block;
overflow: hidden;
position: relative;
}
.home-img-container {
position: relative;
overflow: hidden;
cursor: pointer;
}
.home-img-block:hover .overlay {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.home-img-container:after {
content: attr(data-content);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.5s;
border: 1px solid #fff;
padding: 20px 25px;
text-align: center;
}
.home-img-container:hover:after {
opacity: 1;
}
.home-img-block img {
display: block;
transition: all 1s ease;
}
.home-img-block:hover img {
transform: scale(1.25);
background: rgba(0, 0, 0, 0.3);
width: 33.33%;
max-height: 100%;
overflow: hidden;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
width: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
#home-img-block-wording-container {
width: 100%;
height: 300px;
}
.home-img-wording-blocks {
width: 100%;
height: 100%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.home-img-wording-block-title {
padding-top: 30px;
font-size: 1.7em;
}
.home-img-wording-block-description {
padding: 25px 50px 0 50px;
font-size: 1.1em;
color: #5d5d5d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-block-section">
<div id="home-img-blocks">
<div class="home-img-block fadeBlock1">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">WEB DESIGN</div>
<div class="home-img-wording-block-description">The OD team can see your web design visions brought
to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
</div>
</div>
<div class="home-img-block fadeBlock2">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test2new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">ECOMMERCE</div>
<div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.
gfdgfdsg greg reg regrfesg fdsg gretswtgy tgreswt treswt trgegfd gsvbd fbgre greasgv drfdg greaag gredr</div>
</div>
</div>
<div class="home-img-block fadeBlock3">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test3new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
<div class="home-img-wording-block-description">MARKETING STRATEGIES gfdgf fdggs gfsg gfsg gf sgf g
gfdsg sdfggfs gfdsgssdfg fdggfds gfdsg gfds gfdgs gf dsgfdsgfgs gfdgfs gtrg resg reg rgesgresrgrg</div>
</div>
</div>
</div>
</div>
.home-img-block:hover .overlay
and
.home-img-block:hover img
replace them with
.home-img-container:hover .overlay
.home-img-container:hover img
otherwise you're triggering when you hover over the whole container instead of only wheen hovering the img one.
I have a question regarding my previous post:
Animation stop with css3
The slider works perfect in Chrome. In firefox however it is not working properly. Does anyone here have an idea?
Slider can be found here http://jimmytenbrink.nl/slider/
It looks like there is a problem in firefox with positioning absolute + display: table-cell.
My code is as follows:
<header>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div >
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
</header>
And the css;
header {
margin-top: 10px;
width: 1185px;
display: table;
overflow: hidden;
background-color: #000;
height: 500px;
}
header > div {
background: url('./images/iron_man_bg.jpg');
width: 123.8px;
height: 500px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
border: 2px solid #fff;
overflow: hidden;
}
header div:first-child {
margin-left: 0px;
}
header div:last-child{
margin-right: 0px;
}
header div:hover span {
left: 50px;
opacity: 1;
}
header > div img {
position: absolute;
left: -240px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-filter: grayscale(1);
overflow:hidden;
}
header > div span {
-webkit-transition: left .3s;
transition: left .3s;
position: absolute;
bottom: 30px;
color: white;
left: -70px;
opacity: 0;
width: 151px;
font-family: 'Fugaz One', cursive;
text-transform: uppercase;
color: #fff;
font-size: 24px;
text-shadow: 0px 0px 10px #f1f1f1;
filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}
header > div:hover {
width: 920px;
}
header div:hover img {
left: 0px;
-webkit-filter: grayscale(0);
}
Here is what works:
http://codepen.io/jeremyzahner/full/cAEbv
Basically, i added a new container inside the "div" with class .inside. On that i do width:100%; height:100; position:relative; overflow:hidden;. Plus, i did remove the fixed height on the outer divs, since the header already holds that fixed height, it is not necessary to set it again.
It is a knonw "bug" of firefox that it treats display:table-cell; divs like that. I don't think they will fix it soon. So the best workaround (at least in my experience) is another inner wrapper like here.
CSS Modification:
header > div .inside {
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
header > div {
background: url('./images/iron_man_bg.jpg');
width: 123.8px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
border: 2px solid #fff;
overflow: hidden;
}
HTML Modification:
<div>
<div class="inside">
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
</div>
This was tested in actual version of Chrome and Firefox (on Ubuntu).
Hope this helps