Interactive picture overlay tutorial




In the present day we are going to create some fascinating impact on your portfolio or gallery in your web site. In case you are selling your self on-line by way of your personal web site, it’s best to at all times embody some examples of your work. You must promote your self and your work as a lot as you possibly can as a result of nobody else will do it for you, no less than not at first. So don’t be shy and let’s get your fingers a bit soiled…

In relation to designing the portfolio half, you possibly can go in 3 ways. First is to incorporate plain pictures of your work (web site screenshots). That is probably the most typically used resolution. Second is to incorporate clickable picture with hyperlink to dwell demo of your work hosted on-line. This may elevate the standard and enchantment of your portfolio extra than simply some plain pictures. Stay demos are at all times higher than static pictures. If some potential shopper has an opportunity to go to the true web page, it feels completely different from some image. The final choice is probably the most difficult to do, however I feel, additionally the very best one to go along with. Creating portfolio with picture, dwell demo hyperlink and… Case examine!

Should you don’t know what case examine is I’ll clarify it to you. Case examine cowl the entire design strategy of one thing. It reveals what was the philosophy and particular person steps behind creating the ultimate product, the way you got here from A to B. The size of case examine is extremely particular person and relies upon solely on you. It may be couple pages or simply couple of notes within the checklist. You’ll be able to go deep and look at each element or title solely an important issues and neglect the remainder. I’ll discuss extra in-depth concerning the case examine in future article. All it is advisable to want now could be that case examine is solely a narrative, goal and objectives behind the design.

After brief clarification, we are going to checklist our objectives for at present.
– creating overlay for our pictures
– overlay will embody two buttons
– first button will redirect the consumer (potential shopper) to dwell demo
– second button will redirect to brief case examine for that work
– the overlay shall be seen solely when hovering over pictures

I’ll depart the construction of the html doc to you and begin with a container for our image. Each image shall be nested in a div with class “container” with another div with class “overlay”. After the overlay div we are going to add our image. I’ll use an image of a cat hosted on imgur. The code will seem like this:

<div class="container">
 <div class="overlay"></div>
 <img src="http://i.imgur.com/d9Jr0za.jpg" alt="Cat within the nature">
</div>

Within the subsequent step, we are going to add two buttons into our overlay div. First button shall be “Stay Demo” and the second “Case Research”.

<div class="container">
 <div class="overlay">
 <a href="https://weblog.alexdevero.com/interactive-image-overlay-tutorial/#">Stay Demo</a>
 <a href="https://weblog.alexdevero.com/interactive-image-overlay-tutorial/#">Case Research</a>
 </div>
 <img src="http://i.imgur.com/d9Jr0za.jpg" alt="Cat within the nature">
</div>

Nice, that is all work we’ve got to do in HTML and so we are going to transfer to CSS.

First we are going to create rule for our container to set its place, width and peak.

.container {
place: relative;
width: 500px;
peak: 333px;
}

We set place to relative to be able to use absolute positioning on the overlay div. With absolute place we are able to “place” the overlay over the picture after which use z-index to place in on high of it – cowl it. The width and peak properties are for picture to restrict its dimension a bit. Subsequent, the rule for our picture.

.container img {
place: relative;
z-index: 1;
width: 100%;
}

The picture is ready to relative place so we are able to use z-index. The outlined worth is 1. Every thing that can have increased worth will then be on high of this picture.

In rule for overlay we are going to outline absolute positioning to cowl the picture alongside with z-index increased than 1 to “put” this layer on high. We will even set the width and peak to 100% to cowl entire dimension the container. As a background we are going to go along with lighter black in rgba worth with alpha (transparency) of .6 (in different phrases 60% clear). We will even use line-height and text-align to heart our <a> tags.

.overlay {
place: absolute;
z-index: 2;
width: 100%;
peak: 100%;
background: rgba(2,2,2,.6);
line-height: 333px;
text-align: heart;
}

By setting line-height to the peak of the container we are going to heart our <a> tags vertically. Textual content-align will take about about horizontal centering.

Now let’s fashion our hyperlinks (buttons). We are going to make them larger with padding, set some background and coloration, add a border on the underside with small radius, set bolder font weight and take away their ornament (underline).

a {
padding: 1em 2em;
background: #ecf0f1;
coloration: #000;
border-bottom: 3px strong #bdc3c7;
border-radius: 4px;
font-weight: daring;
text-decoration: none;
}

Additionally we is not going to neglect to play with kinds for focus, hover and lively states of our <a> tags. Each state will differ with coloration of background and border (focus and hover additionally in coloration of textual content).

a:focus,
a:hover {
background: #95a5a6;
coloration: #fff;
border-color: #7f8c8d;
}
a:lively {
background: #34495e;
border-color: #2c3e50;
}

Another factor … Sans serif will look a lot better for anchor tags textual content.

a {
padding: 1em 2em;
background: #ecf0f1;
coloration: #000;
border-bottom: 3px strong #bdc3c7;
border-radius: 4px;
font-family: sans-serif;
font-weight: daring;
text-decoration: none;
}

Effectively executed. We now have good flat buttons with easy and clear design. Now the one factor left is to cover the overlay on default and present it solely when consumer hover over the picture. First, let’s add a show with worth of none to our .overlay rule.

.overlay {
show: none;
place: absolute;
z-index: 2;
width: 100%;
peak: 100%;
background: rgba(2,2,2,.6);
line-height: 333px;
text-align: heart;
}

Now the hover impact …

.container:hover .overlay {show: preliminary}

By this, whenever you hover over the container with picture, the worth of overlay show property shall be modified to preliminary. Divs are block parts, so the worth shall be “block”.

That’s all! As you possibly can see, we didn’t want any JavaScript concerned to create this overlay impact for our portfolio. Under is a hyperlink to codepen the place you possibly can see this in actual dwell.

Codepen instance:

https://codepen.io/d3v3r0/pen/AKjbB

Should you appreciated this text, please subscribe so you do not miss any future publish.








If you would like to help me and this weblog, you possibly can turn into a patron, or you should purchase me a espresso 🙂







Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#Interactive #picture #overlay #tutorial