Image does not fit to background image - html

I am trying to build a page using bootstrap and css where when a mouse pointer is placed on an image, the image will fade and the background image will show. Image fades fine but does not fit though all of them is 100px in size(in all dimensons) and white space is seen.Link:http://codepen.io/Ishtiaque/pen/ONPRyp?editors=1100
Here is my code:
<div class="portfolio">
<h2>Portfolio</h2>
<div class="row position">
<div id="project1" class="col-xs-6">
<img src="http://thumb1.shutterstock.com/display_pic_with_logo/3617441/376416154/stock-vector-phonebook-icon-phonebook-icon-eps-phonebook-icon-vector-phonebook-icon-eps-phonebook-icon-jpg-376416154.jpg">
</div>
<div id="project1" class="col-xs-6">
<img src="http://thumb1.shutterstock.com/display_pic_with_logo/3617441/376416154/stock-vector-phonebook-icon-phonebook-icon-eps-phonebook-icon-vector-phonebook-icon-eps-phonebook-icon-jpg-376416154.jpg">
</div>
</div>
</div>
CSS part:
#project1 {
background-image: url("https://t1.ftcdn.net/jpg/00/33/60/96/160_F_33609643_L3xInzQroBP4PX8zaZICZqofvvfRxZW9.jpg");
background-size: 100px;
width: 100px;
height: 100px;
}
#project1 img {
width: 100px;
height: 100px;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
}
#project1 img:hover {
opacity: 0;
}
.portfolio {
padding-top: 50px;
overflow: auto;
background: url(http://4k-background.com/highresolution/l_011.jpg)no-repeat center center fixed;
background-size: cover;
height: 500px;
}
.position {
padding-left: 70px;
}

Just tweaked with ur codepen and fixed it, there was padding on the div in the background. I set padding: 0px; and its good now.
CSS
#project1{
background-image:url("https://t1.ftcdn.net/jpg/00/33/60/96/160_F_33609643_L3xInzQroBP4PX8zaZICZqofvvfRxZW9.jpg");
background-size: cover;
padding: 0px;
}
#project1 {
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
}
#project1 img:hover {
opacity: 0;
}
.portfolio{
padding-top:50px;
overflow:auto;
background:url(http://4k-background.com/highresolution/l_011.jpg)no-repeat center center fixed;
background-size:cover;
height:500px;
}
.position{
padding-left:70px;
}
.image {
width: 120px;
height: 100px;
}
Just replace your CSS with this.
EDIT: Oh, by the way, add the class="image" to both image tags

Related

Crossfading image hides other elements

I'm trying to make two images crossfade when you hover over them, and it works besides the fact that it hides the text I need. The text should be under the image instead of behind it. How can I fix this?
#center {
text-align: center;
}
#under {
text-align: center;
margin: 0;
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
#crossfade {
position: relative;
}
#crossfade img {
position: absolute;
left: 0;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#crossfade img.top:hover {
opacity: 0;
}
img {
margin-right: 3%;
max-width: 65%
}
#goofy {
margin: 0;
margin-bottom: 40px;
}
<div id="center">
<div id="crossfade">
<img id="goofy" src="https://inpulse.eli328.repl.co/half.png" alt="half" class="bottom">
<img id="goofy" src="https://inpulse.eli328.repl.co/active.png" alt="active" class="top">
</div>
<p id="under">
The Inpulse creates a powerful electric charge that when reaching sufficient levels, creates a bright arc of lightining between the two prongs. The handheld device will definitely satisfy its user.
</p>
</div>
Give #crossfade width & height.
#center {
text-align: center;
}
#under {
text-align: center;
margin: 0;
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
#crossfade {
position: relative;
width: 500px;
height: 330px;
}
#crossfade img {
position: absolute;
left: 0;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#crossfade img.top:hover {
opacity: 0;
}
img {
margin-right: 3%;
max-width: 65%
}
#goofy {
margin: 0;
margin-bottom: 40px;
}
<div id="center">
<div id="crossfade">
<img id="goofy" src="https://inpulse.eli328.repl.co/half.png" alt="half" class="bottom">
<img id="goofy" src="https://inpulse.eli328.repl.co/active.png" alt="active" class="top">
</div>
<p id="under">
The Inpulse creates a powerful electric charge that when reaching sufficient levels, creates a bright arc of lightining between the two prongs. The handheld device will definitely satisfy its user.
</p>
</div>

CSS sliding zoom effect with overlapping element

I have a header with two divs. The two divs are next to each other. I'm using bootstrap with flex box for this. I want to create a sliding effect (and zoom) when hovering over the divs. Hovering over the left div should change the width of both the left and right div.
Tricky part I'm having is that I want to add a diagonal line with the same color as the right div to create a nice look. I've tried creating that with a pseudo after on the right div but the issue is when hovering it will not move with the rest of the div. I had to give it position: absolute to display it outside the right div.
Maybe I'm doing something wrong or maybe there is a better solution. I haven't figured this one out yet.
JSfiddle
https://jsfiddle.net/aq9Laaew/235971/
.header {
z-index: 1;
height: 50vh;
position: relative;
overflow: hidden;
}
.header-img {
width: 60vw;
height: 50vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(asset_path("bgs/bg-1.jpg"));
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
}
.header-img:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
width: 80vw;
}
.header-content {
color: #000000;
background-color: #FFFFFF;
width: 40vw;
height: 50vh;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
overflow-x: visible;
}
.header-content:hover {
width: 80vw;
}
.overlay::after {
content: " ";
display: inline-block;
position: absolute;
width: 20%;
height: 100%;
left: 50%;
border-style: dashed;
border-width: 1em;
border-color: #000000;
}
<div class="header d-flex flex-row">
<div class="header-img"></div>
<div class="header-content">
<div class="overlay"></div>
<div class="d-flex justify-content-center">
<div class="mt-5">
<div class="text-center header-text">
<h2>Text</h2>
</div>
</div>
</div>
</div>
</div>
After some investigation I've fixed the sliding effect of the overlay. I've appended the div.overlay inside the header-content and set postion:relative on .header-content class.
.header {
z-index: 1;
height: 50vh;
position: relative;
overflow: hidden;
}
.header-img {
width: 60vw;
height: 50vh;
background-position: 75% 50%;
background-color: #EFEFEF;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
}
.header-img:hover {
transform: scale(1.1);
width: 100vw;
}
.header-content {
position: relative;
color: #000000;
background-color: #FFFFFF;
width: 40vw;
height: 50vh;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
overflow-x: visible;
}
.header-content:hover {
width: 80vw;
}
.content-text {
position: absolute;
left: -2%;
}
.overlay::after {
content: " ";
display: inline-block;
position: absolute;
width: 70%;
height: 200%;
left: -35%;
top: -60%;
background-color: #FFFFFF;
transform: rotate(10deg);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header d-flex flex-row">
<div class="header-img"></div>
<div class="header-content">
<div class="overlay"></div>
<div class="d-flex justify-content-center">
<div class="mt-2">
<div class="text-center content-text">
<h3>text</h3>
</div>
</div>
</div>
</div>
</div>

How do I animate background image size on hover smoothly in css?

I have a div with a background image. On hover, I want the image to zoom in slightly. I have it working (see fiddle) but I want it to animate smoothly over 0.3 seconds and then go back smoothly instead of jumping.
How do I do this?
https://jsfiddle.net/ufgnroor/2/
HTML
<div class="portfolio-item">
</div>
CSS
.portfolio-item {
height: 300px;
position: relative;
text-align: center;
cursor: pointer;
margin-bottom: 20px;
background-position: center;
background-size: cover;
background-image: url('http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg');
}
.portfolio-item:hover {
background-size: 150%;
-webkit-transition: all 0.3s ease-in-out;
}
For your case you have to set the background-size & the transition before the hover:
.portfolio-item {
background-size: 100%;
-webkit-transition: all 0.3s ease-in-out;
}
.portfolio-item:hover {
background-size: 150%;
}
https://jsfiddle.net/gv5pjqok/1/
Use Transform scale. You will need a wrapper too so the image dosent overflow
<div class="wrapper">
<div class="portfolio-item">
</div>
</div>
.portfolio-item:hover {
-webkit-transform: scale(1.5,1.5);
-webkit-transition: all 0.3s ease-in-out;
}
Demo
Instead of using background-size: 150% use transform. Here's an example:
.portfolio-item:hover {
transform: scale(1.5);
transition: all 2s ease-in;
}

delaying the hover of background- image [duplicate]

This question already has answers here:
CSS3 background image transition
(13 answers)
Closed 7 years ago.
CSS
.navbar-brand {
display: block;
margin: 0; padding: 0;
height: 80px;
width: 70px;
background: url('img/logo_orig.png') no-repeat center center;
background-size: 100% auto;
}
.navbar-brand:hover {
background: url('img/logo_hov.png') no-repeat center center;
background-size: 100% auto;
}
This creates a button with a background image, when hovered it hnages the background.
I want to add a delay to the background image when hovered. similar to using
transition: background-color 0.35s ease;
You can use something like this.
HTML:
#cf {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#cf img {
position: absolute;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
height:inherit;
width:inherit;
}
#cf img.top:hover {
opacity: 0;
}
<div id="cf">
<img class="bottom" src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg" />
<img class="top" src="http://cdp.pasctunisie.org/wp-content/uploads/2015/05/light-circles-wave-powerpoint-backgrounds.jpg" />
</div>

Trying to Display Content Once Image is hovered over

Just making this from scratch for a project of mine. I am wanting to create a hover affect on an image that then displays content about that image on top. The image would dim on the hover and the content would then display above it.
The problem that I am having is the content is going off the opacity of its parent div. How do I make the child div not get affected by the opacity property?
Here is my HTML:
<div class="featured-home-bg">
<div class="background-content">
<div class="featured-home-content">
<h2>Home Name</h2>
<p>Lorem Ipsum leo dormit tan loius ov noetermit.</p>
</div><!--- end featured-home-content --->
</div><!--- end background-content --->
</div><!--- end featured-home-bg --->
Here is my CSS:
.featured-home-bg {
background: url(../images/home-1.jpg) no-repeat;
background-size: 400px;
height: 300px;
}
.background-content {
background-color: #000;
height: 225px;
width: 400px;
opacity: 0;
}
.background-content:hover {
opacity: 0.6;
-webkit-transition: opacity 0.50s ease-in-out;
-moz-transition: opacity 0.50s ease-in-out;
-ms-transition: opacity 0.50s ease-in-out;
-o-transition: opacity 0.50s ease-in-out;
}
.featured-home-content {
width: 400px;
height: 300px;
}
.featured-home-content:hover {
cursor: pointer;
width: 400px;
height: 300px;
}
here this is the way to do that as #Henric Ã…kesson said but here with every div
html
> <div class="image"><!-- image can be placed here --> <div
> class="imagehover">text </div></div>
css
.image {
width: 400px;
height: 400px;
background-color: red;
line-height: 400px;
}
.imagehover{
width: 400px;
height: 400px;
background:;
opacity:0;
text-align: center;
font-size:20px;
transition: 0.2s ease-in-out;
}
.image:hover .imagehover {
transition: 0.2s;
opacity:1;
background-color: rgba(0, 0, 0, 0.5);
text-align:justify;
color:white;
font-size:25px;
font-weight:700;
font-family: "apercu",Helvetica,Arial,sans-serif;
text-align: center;
line-height: 400px;
}
http://jsfiddle.net/d6yhnmnf/5/
I think you would like to have the code something like this?
.featured-home-bg:hover .background-content {
opacity: 0.6;
}