How do you do an image rollover using html/css? - html

Im currently in the process of building a website for my graphic design work. On my home page Ive got a selection of images showing my work. I want to be able to hover over the images so they have an overlay showing the name of the project and what category it comes under. Ive researched that you can do this using html, using the following code -
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</img>
</a>
however when i tried this, it didn't work on the preview, I've already heard that this method can cause problems and is pretty old school.
Ive also read that you can use CSS method by creating an image with the two images you want rolling over next to each other.
However if i do it this way will it be easy to put text over the rollover, as well as links. For example on the roller over image I will make the text using HTML and links, but is this easy to do using the CSS method?
Here is a website that uses this method -
http://www.equisgarcia.com

There are multiple approaches to this issue, depending always on your needs.
I made a fiddle using only CSS with one of the approaches, you can see it working here.
All you you need is:
1) Define a parent element "parentExample" containing the image and the text with a size.
2) Define image "imageExample" and text "textExample" to cover all the parent size and set the text to be hidden by default.
3) Define a hover "parentExample:hover" in which image is hidden and text display.
.parentExample {
height: 400px;
width: 400px;
}
.imageExample {
height: 100%;
width: 100%;
}
.textExample {
height: 100%;
width: 100%;
display: none;
}
.parentExample:hover .imageExample {
display: hidden;
}
.parentExample:hover .textExample {
display: block;
}

An image
div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }
On hover display a different image
div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }
If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class
div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }

This is how the first figure image on the site is done in HTML:
<html>
<head>
<title></title>
</head>
<body>
<div id="pr_contain_item_7129129">
<a class="nohover" href="/New-Year-s-Card" id="p7129129" name=
"equisgarcia" onfocus="this.blur()" onmouseout=
"this.className='nohover';" onmouseover="this.className='hover';" rel=
"history"></a>
<div class="loader_holder" id="load_7129129"><img src=
"/_gfx/loadingAnim.gif"></div>
<div class="cardimgcrop" id="cardthumb_7129129"><img border="0"
data-hi-res=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506_2x.jpg"
height="169" src=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506.jpg"
width="300"></div>
<div class="thumb_title">
<span class="text">New Year's Card</span>
</div>
<div class="excerpt">
Fig.ω
</div>
<div class="thumb_tag">
<span class="text"><a href=
"http://www.equisgarcia.com/filter/Lettering">Lettering</a>,
<a href=
"http://www.equisgarcia.com/filter/Print">Print</a> </span>
</div>
</div>
</body>
</html>

you can simply do this with javascript and html and also with css and as follows:
<html>
<style type="text/css">
#sam{
height: 100px;
width: 100px;
background-color:#ccc;
}
#sam:hover{
background-color: #eee;
}
</style>
<head>
<script type="text/javascript">
var change = function(){
var x = document.getElementById("sam");
x.innerHTML = "this is new";
}
var changeanother = function(){
var x = document.getElementById("sam");
x.innerHTML = " ";
}
</script>
</head>
<body>
<div id="div2"></div>
<div id="sam" onmouseover="change();" onmouseout="changeanother();"> </div>
</body>
</html>
futrher using innerHTML helpes you to gave more controls over your tag.
you can also use img tage insted of a div tag.
as you wish

You an use sprites; in CSS using background-position-x, -y properties.
<div class="image"></div>
CSS:
div.class {
background-image: url('../img/image.jpg');
}
div.class:hover {
background-x: -100px;
}
Providing you have a sprite image created (two or more images in one). On hover you are actually offsetting your image by 100px to show the other image.

Related

How will i create a link in my menu that point to that same page

How will i create a link in my menu that point to that same page . like what happend in this site http://nightswatch.afrcreative.com/ the about us is still in the same page not another page
This is acheived using anchor tags.
Refer here
You need to use anchor tags like so:
.tall {
height: 600px;
background: cyan;
}
.about {
height: 500px;
}
<div class="tall">
About
</div>
<div class="about">
<a name="about" />
<h1>About</h1>
</div>
You can then get fancy and intercept this with js to smoothly animate or use the scroll-behavior css property.

How to make a resume Header (HTML)

I want to make a resume header just like this
Expected Output
I have tried this HTML code with less CSS to achieve this task
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center">
<img src="http://gocartoonme.com/wp-content/uploads/cartoon-avatar.png"
width="10%" height="10%" align="middle">Sam<br clear="all">
</h1>
</body>
</html>
But I could not achieve that resume header.
The expected output would be a Resume header just like the image mentioned above
You can do it with CSS fairly easily, using properly structured HTML:
HTML:
<div id="bio-intro">
<div id="img-container">
<img src="" alt="treybake Frontend Developer" />
</div>
<div id="bio-info">
<h1>TreyBake</h1>
<h3>Frontend Developer</h3>
</div>
<div id="bio-contact">
<p>
e: someemail#domain.com <br/>
t: 0112233445566<br/>
w: domain.com
</p>
</div>
</div>
CSS:
#bio-intro {
background: lightgray;
width: 100%
}
#img-container, #bio-info, #bio-contact {
display: inline-block;
width: 33%
}
#img-container {
border: 1px solid;
border-radius: 100%;
max-width: 150px
}
We essentially break up each column into it's own container. We set these containers to a 1/3 of the parent width and set the display to inline-flex to make a row. Everything else is simple CSS to create a bordered image (no image, hence you see the ALT attribute value on the image - replace with an image and you'll see a much better result).
Working Example
I recommend flex-box.
You can assign "display:flex" to a element within which all your children are container, i.e., all the elements you are trying to align based on your requirements.
From there, flex-box provides numerous other features which you can explore here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flex-box not only easy to implement, but it is also responsive. This may not be too important in your specific case, but something additional benefit to keep in mind while styling elements.
<li class="flex-container">
<ul class="flex-item">Your image</ul>
<ul class="flex-item">Your Name/Title</ul>
<ul class="flex-item">Your contact</ul>
</li>
.flex-container {
display: flex;
justify-content: space-between;
}
https://jsfiddle.net/snehansh/fm3etpsu/5/

how to change the size of the image on the button in html/css

I've been trying to change the size of the image on my button.
Think of it like this: I have a button with an image on it, and it's currently way too big. I've tried scaling it down as such:
<img src = "Button.jpg" height: "50%"; width: "20%"> and this doesn't work, no matter what I put in as the height and width.
Even changing it to 20px and 50px doesn't do anything. I'd prefer not having to create a class because I don't know how to navigate button classes and I'm pretty sure there's a way just to do it like how I'm doing it now.
Also, it's not actually a button, it's part of a list.
<li><a href="https://www.google.com/" target="_blank">
(That's also another issue.)
OK NEW CODE FOR THE BUTTON WITH A CLASS:
<li><button class = "test"></button></li>
</ul>
And for my CSS:
.test{
background-image: "instaButton.jpg";
height: 100px;
width: 100px;
}
You should apply custom height and width to the image, not to the button.
If you resize the button, the button size will change, but the image will go out of its boundaries. If you use this option, you can set overflow:hidden; to the button, but your image will get cropped.
If you resize the image, the image WILL be resized, and the button will resize respectively to the image.
Run the following snippet for examples:
button {
padding: 5px;
background: #d95753;
border: 0;
}
.btn-size {
width: 30px;
height: 30px;
}
.img-size img {
width: 30px;
height: 30px;
}
<h1>
Initial styling:
</h1>
<button>
<img src="http://via.placeholder.com/350x150" />
</button>
<h1>
If you resize the button:
</h1>
<p>
the button size will change, but the image will go out of its boundaries. If you use this option, you can set overflow:hidden; to the button, but your image will get cropped.
</p>
<button class="btn-size">
<img src="http://via.placeholder.com/350x150" />
</button>
<h1>
If you resize the image:
</h1>
<p>
the image WILL be resized, and the button will resize respectively to the image.
</p>
<button class="img-size">
<img src="http://via.placeholder.com/350x150" />
</button>
You need to link to a css file in the header. in the css file you can then say: .class and then you can change the shit. So in the html file, you first should add a class to the button so that the css knows where you're talking about.
Your code should look something like this:
<img src="Button.jpg" height="50%" width="20%">
I think you have a wrong html syntax :)

Replace one image with another using hover

I have this code
<div class="mix category-1">
<a href="img/holder-01-large.png" class="photo">
<img src="img/holder-01-small.png alt="Ram - Srbija" class="img-small-1"></a>
Primer montaze
<a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video primer</a>
</div>
I want to replace this holder-01-small.png when hover over it with image with same dimensions. Is that possible by not touching this HTML code, just using CSS?
Yes it's possible, but not using the approach you have presented.
Instead, create a div (using an img tag here would mean we would need a transparent image to act as a placeholder, whereas a div will just work)
<div class="image"></div>
And in css try something like the below, you will need to specify a height and a width as the div will technically be empty, otherwise it will just collapse on itself.
.image {
background-image: url("path-to-file");
height: xx;
width: yy;
}
.image:hover {
background-image: url("path-to-different-file");
}
This div will then change it's background image.
It's possibly using this HTML, yes. (As long as you insert the missing quote after the src, that is!)
a.photo:hover img {
display: none
}
a.photo:hover::after {
content: url(http://lorempixel.com/100/100);
}
<div class="mix category-1">
<a href="img/holder-01-large.png" class="photo">
<img src="http://lorempixel.com/g/100/100" alt="Ram - Srbija" class="img-small-1" />
</a>
Primer montaze
<a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video primer</a>
</div>
Note that I changed the HTML to point to another image on the web in order to show something here in the snippet; hope you don't consider that to be cheating!
if you can place a div instead of an imgtag, you can add the background-imgproperty in css and then a hover. Something like this:
.img-small-1{
background-img: url('..img/holder-01-small.png');
width: 'your image's width';
height: 'your image's height';
}
.img-small-1:hover {
background-img: url('..img/myOtherImage.png');
}

How can I swipe/scroll horizontally with acceleration/deceleration through a set of images in a DIV on a mobile site using only HTML and CSS

I want to allow mobile site users to swipe/scroll through a list of icons.
The icons are div tags containing img tags.
The user should be able to swipe the container, scrolling/sliding the elements left or right.
The images need to slide smoothly with acceleration and deceleration.
Needs to work on iOS and Android.
We needed something like this sometime back, so I made a demo for it at that time. It's pretty basic, but it'll lay up all the ground work you need. First, lets start with the markup :
Markup
Since you mentioned jQM in the tag section of your question, Im gonna go with jQM [data-role=page] markup. You'd have a structure like this :
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Slideshow</h1>
</div>
<div data-role="content">
<div class="images">
<!--your images here -->
</div>
</div>
</div>
So you'd put all your images in the div with class=images. A particular group of images were encapsulated within a tags like this :
<a href="#">
<img src="25AC.jpg" />
</a>
<a href="#">
<img src="nature.jpg" />
</a>
<!--so on-->
You'd place this inside div.images. So that's about the markup we have.
CSS
The stylesheet part is simple.
.images {
height : 280px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color : #272722;
}
.images a{
padding : 14px 5px 0px 5px;
margin: 5px 3px 0px 3px;
vertical-align: middle;
display: inline-block;
}
images img {
max-width: 100%;
max-height:512px;
}
Important properties to note here :
The overflow-x, overflow-y properties : The former needs to be enabled and the latter needs to be disabled. Only then the scroll will happen when you swipe right or left.
The white-space property : This is important to make the images come in a straight horizontal layout.
The max-width property : This is for scaling the images on mobile.
That's it! You're done!
Extras
I just added a popup to show the image when its tapped so that I'd be able to demonstrate the event handling. Here's the popup :
<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="b" data-corners="false">
Close
<div id="stuff"></div>
</div>
I'd be putting the image inside div#stuff when the a surrounding the img is clicked. Here's the JS :
//pageinit event of page
$(document).on("pageinit", "[data-role=page]", function() {
//cache popup for future use
var $popup = $("#popupInfo");
//click event for "a" tag inside .images
$(this).on("click", ".images > a[href=#]", function(e) {
//prevent default action
e.preventDefault();
//clone the image inside "a"
var $img = $(this).find("img").clone();
//add the cloned image inside #stuff
$popup.find("#stuff").html($img);
//open popup()
$popup.popup().popup("open");
});
});
Demo & Code
Demo & Code at jsbin.com
Alternatives
You could try out swipejs, which is jQuery plugin which will provide a much more sophisticated functionality. Here's the link to the site.