We Keep Coding

Overlay Image with text with Bootstrap 4

I'm very new to web development so have mercy with your responses.
I have a grid of images that I want to modify. When the mouse hovers over an image, I want an overlay with text to appear over the image (this may require the cell in the grid to expand to contain all the text).
When the image with the overlay is clicked, it should open a modal (I already have this working) with the full text and info inside.
All changes need to look smooth with transitions (overlay shouldn't just be there when the mouse touches, it should animate in, etc.) when they enter/exit.
I'm not sure what the right terminology is for this, so I'm struggling to find info searching on Google. So, if you could provide me with some resources to learn this, or provide some examples, it'd be much appreciated. Thanks in advance :)
Edit: Here's close to what I want to happen
There will be an image, like this:
After the mouse hover over this image, an overlay should animate in to look like this:
The difference between this and what I want, is I want to show text instead of an icon, and I also want the cell in the grid upon which the mouse is hovering to expand to more pleasantly present the text that will be shown on the overlay.

You can do this with just css first you need to wrap your image in a div and set the position to relative. Then place the image and the overlay inside of it. Then you can use css transitions to achieve the desired effect. You will set the original opacity of the overlay to 0 and set the hover opacity to 1. Below is an example. Since you haven't posted any code I can't tell what your markup will be so I just made an example.
.img-container{
position:relative;
display:inline-block;
}
.img-container .overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgb(0,170,170);
opacity:0;
transition:opacity 500ms ease-in-out;
}
.img-container:hover .overlay{
opacity:1;
}
.overlay span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
}
<div class="img-container">
<img src="https://placehold.it/300x300">
<div class="overlay">
<span>overlay content</span>
</div>
</div>

Set image as "block"
.img-container{
position:relative;
display:inline-block;
}
.img-container img{
display:block
}
.img-container .overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgb(0,170,170);
opacity:0;
transition:opacity 500ms ease-in-out;
}
.img-container:hover .overlay{
opacity:1;
}
.overlay span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
}
<div class="img-container">
<img src="https://placehold.it/300x300">
<div class="overlay">
<span>overlay content</span>
</div>
</div>

Sounds like you're looking for tooltip, see
https://getbootstrap.com/docs/4.0/components/tooltips/

Can I use CSS to create this scrolling behavior or should I use jQuery?

I'm looking for suggestions on what to continue researching. I'm trying to create a different scrolling behavior on this website— http://schipperbros.com. The image slider in the "work" section and the white "about" section are to be fixed while the blue introduction section, orange logo section and the last section, "contact" scroll freely.
I basically want it to work like this site http://https://codyhouse.co/demo/alternate-fixed-scroll-background/index.html. The fixed portions of my site will be like the images in this site. This site uses background-attachment:fixed but I don't believe I can use this because my fixed areas are not just a single image—one of my sections is an image slider and the other is made up of copy.
Any thoughts what I could implement or a direction on what I can look for would be very helpful. Thanks you!

First let me tell you what you are wishing to achieve is known as parallax scrolling effect. There are tons of resources you can find.
Now coming to your original question, there are certain websites which use pure css to achieve parallax scrolling. Try this
http://keithclark.co.uk/articles/pure-css-parallax-websites/
The key is to use CSS3 transformations. You can refer http://www.w3schools.com/css/default.asp to find simple examples of CSS3 to understand code in the above website (keithclark).
This should come in handy if you are willing to use JS:-
http://www.jqueryscript.net/tags.php?/parallax/

Here's a really simple example using only CSS. It uses background-attachment: fixed;. Keep in mind background-attachment is not supported in Opera Mini or the Android browser.
html,
body {
min-height:100%;
min-width:100%;
height: 100%;
padding:0;
margin:0;
text-align:center;
font-family: Arial;
}
.background {
width: 100%;
min-height: 100%;
background-size: contain;
background-position: center center;
background-attachment: fixed;
}
.background > div {
background-color: #000000;
color: #ffffff;
padding: 30px 0;
}
.background1 {
background-image: url(http://placehold.it/800x450&text=Background1);
}
.background2 {
background-image: url(http://placehold.it/800x450&text=Background2);
}
.background3 {
background-image: url(http://placehold.it/800x450&text=Background3);
}
<div class="background background1">
<div>Some content</div>
</div>
<div class="background background2">
<div>A Second Page</div>
</div>
<div class="background background3">
<div>A Third Page</div>
</div>
Here's the working demo in jsFiddle;

fine tuning my lightbox

So I have a simple lightbox with code like this:
jquery code:
var $overlay =$('<div class="overlay"></div>');
$('body').append($overlay);
$('img').click(function(){
$overlay.show();
});
css:
.overlay {
width: 100%;
height:100%;
background:grey;
display:none;
position: absolute;
top:0;
}
This is obviously very simple I haven't wrote much code except the overlay that will appear when the image is clicked and triggers the lightbox.
Here are my questions:
My webpage is longer than the screen, what code could I use to stop the screen scrolling when my lightbox is triggered.
Is it possible to set the lightbox $overlay to only fill the screen in view. So only take up the part of the webpage in the current screen view. I have images spread out over webpages and I when are a lightbox is triggered I would like it to fill only that part of the screen.

Well, I decided to post an answer hopefully it will help you.
First things first, your JavaScript. From the JS you posted, it looks like you are using a different .overlay for each image. Not needed.
Simply make one overlay like so:
<div class="overlay"><img src="#" width="500"/></div>
Then, set the images src when you click on an image on your webpage:
$('img').click(function(){
var src = $(this).attr('src');//Gets the image you clicked on src
$('.overlay').fadeIn();//Fades in the overlay
$('.overlay img').attr('src',src).css('margin-top',($(window).height() - $('.overlay img').height()-20)/2);//Sets the overlay image to the correct source, and centers the image. -20 is for the border
});
$('.overlay').click(function(){
$(this).fadeOut();// And fades out the overlay on click
});
Simple and easy. Now to your actual question.
How you are going to achieve what you want is with CSS.
First, set the body and html's height and width to 100%, and remove the margin. This stops overlay from making scroll bars:
body, html{
width:100%;
height:100%;
margin:auto;
}
Then, to make overlay appear over the image you clicked, change position:absolute; to position:fixed;:
.overlay {
width: 100%;
height:100%;
background:grey;
display:none;
position: fixed;
top:0;
text-align:center;
cursor:pointer;
}
Add a little more CSS to make it look pretty:
.overlay img{
border-radius:5px;
border:10px solid white;
box-shadow: 0 0 5px black;
}
And Bang!
JSFiddle Demo
Make sure you check out the coding in this JSFiddle

Make an hover stay hovered until next link [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
first of all just want to say that i'm not a programer but i'm trying to replicate a code and since my javascript is not the best i'm failing at it.
The "animation" in css/java/wtv i'm trying to replicate is from the 3 first boxes links on this site:
http://artcom.de
As you can see when you hover the box/link it stays hovered until the the mouse goes over another link.
I found some solutions with javascript that envolve animating and use a .stop().animate( function but that makes impossible to code css on top of it, one of the things is put a different background image when hovered different a link (that i can make i just can't put the box hovered until the next link).
If you find my question to much of a request feel free to not answer. It's my first post and since coding is a thing that i'm starting i feel kinda nervous of asking this questions.
Thanks in advance for any response.

You could use the below to simply apply a 'hover' class on mouseover of a valid element, after stripping it from similarly qualifying ones. The animation can be handled in CSS using a transition
$('div').on('mouseover', function() {
$('div').removeClass('hover');
$(this).addClass('hover');
});
body {
background: black;
}
div {
transition: all 200ms ease-in;
color: #fff;
border: 3px solid #fff;
width: 20%;
display: inline-block;
margin: 0 20px;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.hover {
color: #000;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>link</div>
<div>link</div>
<div>link</div>

My solution is similar to that of SW4, but offers a slightly different variation. Basically, when you hover over an item, you want to add a style class to it, while removing that class from all of the other (possibly previously hovered) items.
FIDDLE - http://jsfiddle.net/44c9x5eb/2/
In my fiddle, I use a div item called #body instead of styling the actual body element.
HTML
<div id='body'></div>
<div class="item" data-bg="http://www.evokia.com/images/large-background.jpg">1</div>
<div class="item" data-bg="http://p1.pichost.me/i/10/1333648.jpg">2</div>
<div class="item" data-bg="http://www.desktopaper.com/wp-content/uploads/wonderful-fish-wallpaper-large-background.jpg">3</div>
<div class="item" data-bg="http://p1.pichost.me/640/17/1397737.jpg">4</div>
CSS
#body{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background-color:#eee;
z-index:0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: all 350ms ease-in;
}
.item{
float:left;
text-align:center;
padding:20px;
margin:0 8px;
background:#f00;
position:relative;
z-index:100;
}
.item.selected{
background:#0f0;
}
jQuery
$('.item').mouseover(function(){
//If this item is already selected, forget about it.
if ($(this).hasClass('selected')) return;
//Find the currently selected item, and remove the style class
$('.selected').removeClass('selected');
//Add the style class to this item
$(this).addClass('selected');
//set the body to a different image
$('#body').css( 'background-image', 'url(' + $(this).data('bg') + ')' );
});

basically you need to do two things.
Create an active class for the selected button in css that defines
the background color
Bind to the Hover event add the class to the
hovered over button and remove the class from the other buttons.
This will look something like this:
$('button').hover(
//this function is called on hoverin
function() {
//remove the css class from all buttons
$('.active').removeClass('active');
//add the class on the hovered over button
$(this).addClass('active');
},
//this function is called on hoverin not needed in this case
function() {}
);
.active {
background-color: white;
}
button {
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>button1</button>
<button>button1</button>
<button>button1</button>
Keep in mind that in today's landscape a lot of mobile devices are being used to visit your site. Therefore you should not build actual functionality relying on hover events. i.e: A menu that opens up when you hover over it.

Is there a way to set a transition speed on mouse over?

Is there a CSS way or even a javascript way to set a transition speed when swapping images on mouse over? I haven't tried anything so there is no code to provide. I'm wondering if it can me done and an example. Thanks!
HTML
<ul id="navigation">
<li class="link1"></li>
<li class="link2"></li>
<li class="link3"></li>
</ul>
CSS
li.link1 {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left top;
}
li.link1:hover {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left bottom;
}

Use jQuery hover
Suppose you have an HTML structure like this:
<div id="element" style="position:relative;">
<img src="image1.gif" id="img1" />
<img src="image2.gif" id="img2" style="display:none" />
</div>
and css :
img {
position:absolute;
top:0;
left:0;
}
jQuery code:
$("#element").hover(function() {
//fadeout first image using jQuery fadeOut
$("#img1").fadeOut(200);
//fadein second image using jQuery fadeIn
$("#img2").fadeIn(200);
}, function () {
//fadeout second image using jQuery fadeOut
$("#img1").fadeIn(200);
//fadein first image using jQuery fadeIn
$("#img2").fadeOut(200);
});
check below link
http://api.jquery.com/hover/
http://api.jquery.com/fadeOut/
http://api.jquery.com/fadeIn/
Here is a fiddle for demo
Here is a fiddle using css3 and jQuery.hover as fallback for ie as mentioned by hustlerinc

yes there is. the first thing you have to specify though is how you're performing the swap.
if there are two layers on top of each other and you're transitioning opacity of them via CSS, then you'd set transition (-webkit, -moz, -o, etc) opacity 1s; where 1s refers to the number in seconds.
if you're doing the transitions via jquery, or another javascript framework, then your animation functions will have an additional available parameter for a speed in milliseconds, like .animate( {properties xyz}, 200 );

You can do it with CSS3, here's the first result on Google:
http://www.w3schools.com/css3/css3_transitions.asp