Articles, Blog

Bootstrap 4 Image Hover Overlay With Button

October 29, 2019


hi guys and welcome to another bootstrap
4 tutorial this is jamie from system 22 and web design and tech tips comm well
in this video we’re going to create some image with a little overlay a colored
overlay and a little button that you can link to it wherever you want to link it
to to do this we’re going to be using brackets text editor which i’ve got here
it’s free you can download it from our link below this video
and we’re also going to be using some extensions which are also free if you go
to file down to an extension manager it’ll open up your extension manager and I’m gonna go over to my little
install button here I’m gonna be using bootstraps style a
template today and bootstrap for snippets they’re all free to download if
you don’t have them if you just install brackets go to the available just type in bootstrap and I’ll give you
a list of the available plugins or extensions that you can get here like I
say they’re all free as you can see I’ve got these install already
install whichever ones you want you just hit the install tab we’ve got here it’ll
either automatically install it or it’ll take you to a page where you can download a zip file once
you’ve downloaded it simply drag it to this little box here and it will
automatically install it for you so let’s get started
all right so I’m just got a folder here with nothing in it apart from another
folder which I’ve got some images is one three seven just because we need some
images to do what we got to do today and this particular folder is where I’m
going to put my index.html which is what we’re going to create right now so I’m going to go up to file
and I’ve got the bootstrap template extension installed so install so you
can see it right there so I’m just gonna click on it bingo we’ve automatically
got a little page created here so what I need to do is save it save as you and here’s that little folder that
showed you I’m gonna save it in there and I’m gonna call it index right nd DX
dot html’ you’ve always got to give it the file extension so bracket knows what
you’re trying to save it as so we saved that now once you’ve saved
it it’s now in our folder you can double click on it and it’ll open it in your
browser of choice I’m using Google Chrome I suggest you do the same because
it’s just awesome alright so what we’ve got here a little nav bar and a little
sectioning so let’s start to build our little site first thing I’m going to do is I’m going
to they call this the main role I’m just going to change this into a section means I have to close the clothes change
the closing tag into a section also and we’ll leave it as main that’s fine
actually we’re given an ID ID equals main that’s
fun there’s got an idea of mean at that
class of container there’s a bit of text inside they’re not
really interested in that at all but what I’m gonna do is get rid of this actual
contain a bit on the wrapper
below in a container so I was saying div the class of container you
and then I got to chop off that closing div tag there ctrl X to cut and put it
on the bottom ctrl V so now we’ve got a section which is full width and we’re
inside there we’ve got a container or div with the class of container and
another little extension you could get for your brackets is something called
beautify if I select this and hit beautify edit no doubt a beautify here
it all remind me aligns it all the way it should be which is kind of handy too
and again you can just open your extension manager and do that okay
underneath this I just want to create a row somewhere to put our images so I’m
going to create div with the class of row close that out you now the row that I’ve created once of
stretch width of our container and within there I want to put three image
now bootstrap is made up of a division of twelve so if you think of the whole
width of a span is twelve so if all three of something in there I’ve got to
divide 12 by 3 which would be four so I’m going to create
three columns that are all for long div with the class equals
you you
: medium for now the reason we’ve written medium for here
I’m going a little into depth here please feel free to skip ahead if you
know all this already is a medium-sized screened there’ll be
three of them here because we told it it wants to be four and three fours equal
twelve which is the full way if on a smaller device say when it goes to an
iPhone I wanted it to be full width one one just taking out the full width and
I’m also right column small well so our medium screens and anything larger it’s
gonna be four which will be a third and on small screens or anything smaller
it’ll be the whole whit there’s a bit of bootstrap for you now
let’s put in our first image now if we go back to the folder where we saved our index.html member I
had a folder inside there I called it IMG you can call yours or whatever you
want images pictures whatever you want to call it just remember what you’ve
called it it’s pretty standard and my images are
inside there one through seven in this folder that we’re working on is
called the root folder where the index dot HTML resides
so let’s add our image here you opener pointed back it when I say image
IMG which is standard for image and source where it lives the source of the
image it’s open some brackets and it’s in our
image fold IMG and free forward slash it’s already showing us all the images
that we’ve got in there now all images should have an alt tag
and that alt tag is a descriptive version of the image saved for the girl
with brown hair brown head girl or a lot of people use it for SEO purposes and
put in you know stuff about their site keywords or key phrases for their site
I’m just gonna leave that blank for the moment because it’s pretty irrelevant
for us all right so we now got a row that’s got one column which is a third
of it so it should have wanting image there let’s just copy this over another
two time controls see actually before I do that this image I want to give it a
class I want to call it image fluid that kind of makes it responsive and it’ll
IMG that fluid FL UID that means it will fill up the available
space so when it’s a column of four it’ll fill up a third of the space there
when it’s a column of twelve it’ll fill up the hole 12
and it will stretch to fill the arrays available space in its parent div which
is this one all right so we’ve got that now now
let’s copy it across control C and copy drop-down 1 ctrl + V
to paste ctrl V to paste one more time now let’s just change these images out
I’ve got image one really exciting names I put in there too and image three
now watch you deselect you should be able to hop hover over with your mouse
ish show you the images that you’ve actually used here yeah that’s fine now let’s say that and
just take a look see what we’ve got control s to say
and back to our browser refresh now when i refresh we should have three little
images in a row here boom boom from there we are and as I say
there are third each this whole sections 12 across divide 12 by 3 and you’ve got
4 so their columns of 4 okay so we’ve got the images now what I
want to do is have some text inside those images
so how are we going to do that I want to add a button in here that only
appears when we hover over it and to do that let’s go back to our
bracket software and under each of these images I’m going
to create another little div I’m gonna give it the class of let’s
call it overlay so we know what we’re talking about
because we only want it to appear when we put our mouse over it so overlay now initially this is gonna be here all
the time now inside here I’m gonna use another
one of our short codes from our extension manager up here I want to put
a button so let’s say bootstrap for button I had to know these short codes
if you don’t just I’ll show you quickly you can go to your extension manager once it’s loaded I’m gonna use I think
probably bootstrap sniff it’s under I can’t remember but I remember the code
itself and you just go to the more info button it’ll take you to their github
page it’s opened it another monitor over here for me and if you school scroll
down it gives you a list of all the short code so you can find the short
codes there I think actually that was the wrong one
but that’s fine I can say if you load the ones you want may have been that one
and use whichever ones you want and the shortcode I’m going to use this for a
button with an outline so it’s bs4 BTN and put an O on the end it’ll bring up
prompt you for the other ones here I don’t want to use just a light but a
relay and inside just write something like let’s go okay let’s just copy this over so we’ve
got out and there are other little images there ctrl C copy troll V
common on most Windows programs I know I think is command V in come on C or Mac
computer ok great so we’ve given that the class of overlay
but what does overlay actually mean nothing at the moment because we haven’t
created the CSS for it so let’s actually create that bit of CSS
do you want to see what this looks like now I mean they should be there but we
don’t particularly want them to be there so let’s say this
ctrl s to save and go back to us like at refresh is not a whole lot of anything right
there is a thinking there’s the button it’s
actually down there underneath the image you can’t see it because it’s white on
white I guess I could give this a dark
background so you can see what’s going on so if we go back to our brackets
by default it’s got some bit of CSS up here and we’ll use this for us TSS
you just give
in this section we’re hold it me let’s give it a background
color up say blue so it was an ID ID use hashtags where as classes you used
periods or dot main opening close some curly brackets and let’s see background blue or whatever color you are say back
control s back to the site there we go let’s know what a background
color of blue as you see and you can actually
see the padding what I’m gonna do is I’ll give it a bit of padding on the
bottom so we’ve got a bit of working space and do we want me on the top I think it
was all right on the top wasn’t so that should give it a bit of space I
got a feeling ctrl s to say there we go got a bit of space of the
ball well what we want we want this button to be here we want to be in the
middle of our image right here but we really only want it to be there when we hover over when we put our mouse code
cursor over this image so let’s see if we can’t do that with a bit of CSS now
we gave it the class of overlay like I said before class period we start with a
period or a dot overlay okay now let’s open and close some curly bracket
now the first thing we want to tell it is is it’s a positioning thing so we
want to say position now we will say absolute always remember to put your little
semicolon after that and we want it to be in the middle so
let’s say halfway from the top so let’s say top fifty percent and we want it halfway
you know in the middle so we’ll say left 50%
so it’s 50% from the top and we want it 50% from the left
so that should hopefully be in the middle when we do it so we say left 50%
okay now this overlay we want it to have a color
so I could give it blue but that’s gonna
make it kind of disappear within that blue frame there let’s try that we can
always change it we can always change it in a moment
well I’ll say like through how’s that sir
because I’m talking because I’m talking I forgot to put semicolons after these
and if you do that what it happens is it won’t read anything below there so it’s
not going to work they will say background and as you can see it does prompt you
you can always just click on that if you don’t want to type the rest of it and
I’m gonna say a light blue as I like players just click them up
it’s probably gonna be a little pale for what I want but we can always change it
and what do we want will a semicolon okay and we want it to go the whole
height see height of what is overlaying on top
of so we’ll say 100% and again we want it to
span the whole width which is also 100% you
all right well that should take care of most of it what we’re gonna have to do that’s still long this is only gonna be
the color but for that little box that we created
it’s still gonna be in the wrong place let’s just see what we got there this
should take care of the color overlay control s let’s go back to the site now
refresh yeah okay we’ve got off here’s Hutta
light blue overlay but of course we don’t want to see this right now we’ll
take that in a minute but it’s in the wrong place
and our button skinning towards the middle but it’s still not quite in the
right place so what we’ve got here we’ve got there’s one box or one overlay now
that overlay and another overlay so let’s see if we can’t get this thing to
be in the right place let’s go back to our CSS let’s create
another class and call it center well maths let’s click CTR for kind of
century we want to Center those little boxes and the little overlay there so
what we need to do we need to give our overlays
another class Center CTR just copy this over to the
other ones you there we are now they’ve got the overlay
class and they’ve got this new class that we just created called sinter which
we can kind of want to offset or push these boxes up and to the left a bit
looks like that it’s right in the middle right there so we want to go up by 50%
and left by 50% but I think that’s gonna still leave
that thing there we’ll see let’s try it so in our Center again it’s gonna be
position:absolute because we’re saying this is where we want it to be and less try transform and we wanted to
solve translate we want it to move sort of – 50 % up – 50 who said to the to the
left to the left so let’s say translate I spelled that right yet translate and we’ll just open some regular brackets a
regular rounded brackets and inside will say minus 50% for the top and bottom and minus 50%
right as well so last 50 spent and -4 to sin
a bit : after that one now let’s just see what that’s done and
sure s to say back to the site yeah great well no it’s kind of covered
up all the pictures here but it has actually done what we wanted to do here so let’s we’ll have to add some vendor prefixes
to this in a moment I’ll show you that let’s say text-align:center see if that brings
the button to the middle should you you
you but I say yeah I did say
right that’s brought the button to the middle now we need to push it down I take 50% that’s gonna be way too much
because of the height of it so let’s say 30% let’s say padding top 30% can we can
always change this is wrong I’m kind of guessing I could have done this in the
Chrome browser but let’s do it this way control s
you good we’re getting there that’s a little
bit too far and what I was saying about the Chrome browser is I inspect this there’s our padding-top 30 right-click
on it left click on it it’s a highlight so I can just roll I just move this up a
little bit and put my cursor over I can roll up and down and you see it’s moving
in real time let’s put it in the middle there Varner 26 speak 27% now looks about
right let’s change that’s 27% and I got a feeling
we look at the overlay the actual overlay it’s cell
is to why I think it’s covering the gutters at the side of the picture the
image so where’s that where’s our this over
here we are here we go here’s the width for the
overlay again I’m just left clicking on that
let’s bring that in a little bit until we can see the image there I see the
image underneath Oh a little bit more right there that’s
what 93% let’s change that to 93% that’s why I suggest you use a chrome it’s got
that inspector in there was absolutely wonderful
so we said with 93% all right so we kind of done what we wanted to do but
I don’t want that to be that color and also I want to kind of see the image
behind that so here’s our color change this too a bit more like it every now we can still see the image behind five
there we are my should change it to an RGBA value which is more browser
cross-browser friendly to so I’m going to copy that
that’s the color and change that light blue to that color
they’re fine okay got to semicolons there don’t you know see that
let’s just get rid of this for a moment and do a refresh
hey why did our padding awakened I know the padding
I’ve got two percentage marks behind there so that’s probably not gonna work
like with most coding you’ve got to get it exactly right else you’ve got to go
back and debug it and figure out what’s what’s happening what’s not having all
right so we’ve got our button we’ve got our overlay but the thing is we don’t
want to see that overlay until we heard a mouse over there so let’s make it
disappear now here’s the overlay let’s give it the
class of opacity that’s the see-through mist or opacity however you like to say
I will say opacity zero which is totally transparent say well it’s great he’s gonna make it
disappear what’s the point of having it in the first place how you’re gonna
bring it back well that is a little bit a magic we’ll do next so refresh and it
should be all gone boom gone Hey so it’s all gone and so that last 20
minutes was a complete waste of time or was it no it was we can bring it back
by simply what’s the class name you let’s give this another class all of our
little images here let’s give them another class let’s call it midge whole
IMG hawk because they call it what you want just
remember I like to give it something that kind of give me a clue of what’s
going on here let’s add that to all of our little dibs here now we’re
giving it an extra class this whole little thing of image hover
or in image hole sir it’s a class I am ghu movie now what do we want to do when
it hovers so it’s cool on no space hover we want it to
do something to the overlay class so we put dot overlay because it’s a
class what we wanted to do we weren’t we made
it opacity of zero which is totally
transparent so we want to say simply opacity one which is fully visible now
let’s say that control s back to the site
and do refresh okay that’s not working let’s see where
I went wrong here debug and again because I was talking it looks
like I’ve spelled it wrong there uber la 4s right now there we go and it’s doing it but of
course it’s doing it instantly be nicer if it did it
not as instantly doing exactly what we want the buttons
appearing you
so let’s go and make this happen a little bit slower
so let’s see in the overlay section itself let’s see
transition it’s going on a bit this video I apologize but it’s worthwhile
it’s a great little little thing to do let’s say 3/4 a second now let’s say 1/2
second 2.5 seconds and let’s just have it easy so we say that or we can say
ease in ease out rough thing that will probably work just the ease so it’ll
kind of ease and thing that’s probably gonna do it you yeah let’s make that 3/4 our second five
try it again there we go I think
we’ll do nicely let’s get rid of that blue background
and also add a link to that button to actually go somewhere take that away the
background blue you just yet I guess I use my own website URL for the
link but of course you can link it wherever you want it to so let’s wrap
our buttons in an H ref or an a tag here’s our button but a atria equals and
the link where we want it to go now that’ll actually work but I wanted
to open in a new so close that pointy bracket out and put the closing anchor
tag behind whatever it is we want to incapsulate which is the button there I
put it in the wrong place look at that I get things wrong when I talk and do
stuff okay so we’ve wrapped our button in that
aid tag there’s many different ways of doing it I could’ve just written a and
left it open with the button there but this will work for me
so let’s copy this to the other buttons as well
you actually before I do that what I’m going
to put here is target equals and then it gets an underscore and blank
and what that will do is it’ll tell the browser to open it in a new tab rather
than take you away from the existing site that’s what I prefer to do that’s
entirely up to you copy those and of course we’ll have to copy the closing
anchor tags as well there
you and put it just after the button closing
tag there that’s great we’ve got that and the other thing that I was saying was the transform translate will have to
put some what they call vendor prefixes there
to make sure that it’s compatible with all browsers I’m gonna copy this I’m gonna say WebKit
– web kit – piece that after it again and for older Microsoft browsers we can
do MS I think they fix some of these areas now
that just to be sure if you want to check your site afterwards it’s a good
idea to put these there’s another one you can put one in from Mozilla but I
think Mozilla’s fixed now the Firefox their latest version but I could be
wrong it’s always a good idea to check these things in these different browsers
afterwards let’s see that control s and hopefully we’re done our refresh this blue should go away you
there we go – our little button
hearing when we hover over let’s click it
there takes it as you can see another tab to the new site there they go they have had ad
how to add some hover overlays with a button that’ll take you to wherever it
is you want to take your visited I hope you’ve enjoyed that if you have please
like share and subscribe to our YouTube channel
in our next video what I’m gonna do is we use the same thing but have a bit of
text or something in there and we’ll have a model or a modal pop-up when we
click on it rather than just a link there
if you’re interested in web design take a look below I’ve got some great free
courses down there we’ve also got some premium courses with some huge discounts
for our YouTube subscribers so do take a look once again this has been jamie from
system 22 and web design and tech tips comm thanks for watching have a great
day

7 Comments

  • Reply David Breier October 9, 2018 at 11:14 pm

    This is exactly what I was looking for, thanks!

  • Reply a240fal February 1, 2019 at 1:31 pm

    Great, easy to watch tutorial – I really like the relaxed fluid style, thanks

  • Reply el Rlokito February 14, 2019 at 9:09 pm

    Thanks for the video, but you know what. There is a problem when i make the picture smaller. What can i do to make the overlay responsive.

  • Reply Guilherme Esteves March 26, 2019 at 10:02 am

    poh crlh

  • Reply Типичный Негодяй [Modern Rogue на русском] April 23, 2019 at 3:47 pm

    What if I have a text with links in it, and what to show some buttons over it, but in the way that those links stay clickable (with your solution transparent overlay just obcures the text and links are all non-clickable)?

  • Reply Silvana Almeida June 18, 2019 at 12:56 am

    gostei muito do conteudo..obrigada! mas uma pergunta, como faz para centralizar o background no responsivo?

  • Reply Anna C September 10, 2019 at 10:22 am

    Thank you, it helped!

  • Leave a Reply