Image Rotate with Background color change Hover Effect

Image Rotate with Background color change Hover Effect

so, Today in this article i will show you how to create Image Rotate with Backgorund color Hover Effect.

HTML5

HTML5

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone
technologies for the World Wide Web.

Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.

Tags such as <img /> and <input /> directly introduce content into the page. Other tags such as <p>
surround and provide information about document text and may include other tags as sub-elements.
Browsers do not display the HTML tags, but use them to interpret the content of the page.

CSS3

CSS3

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of
a document written in a markup language like HTML.[1] CSS is a cornerstone technology of the
World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including layout, colors,
and fonts.[3] This separation can improve content accessibility, provide more flexibility and
control in the specification of presentation characteristics, enable multiple web pages to share
formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and
repetition in the structural content.

Javascript

Javascript

JavaScript often abbreviated as JS, is a high-level, interpreted programming language that
conforms to the ECMAScript specification. It is a language that is also characterized as dynamic,
weakly typed, prototype-based and multi-paradigm.

Alongside HTML and CSS, JavaScript is one of the three core technologies of the World Wide Web.
JavaScript enables interactive web pages and thus is an essential part of web applications.
The vast majority of websites use it,[10] and all major web browsers have a dedicated JavaScript
engine to execute it.

As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative
(including object-oriented and prototype-based) programming styles. It has APIs for working
with text, arrays, dates, regular expressions, and the DOM, but the language itself does not
include any I/O, such as networking, storage, or graphics facilities, relying for these upon
the host environment in which it is embedded.

HTML5 Code

<!DOCTYPE html>
<html>
<head>

<title> HTML Image Hover Effect </title>
<meta name="viewport" content="width=device-width, initial scale=1, shrink-to-fit=no">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>

<body>



<div class="container">
<img src=" Kumaratuljaiswal.png" alt=""/ >
</div>
<button class="button button1" onclick="chbackcolor('red');">Hover Red</button>

<script>

function chbackcolor(color) {
document.body.style.background = color;
}
window.setTimeout("chbackcolor()",1000);

</script>



<div class="container2">
<img src=" Kumaratuljaiswal.png" alt=""/ >
</div>

<button class="button2 button3" onclick="chbackcolor('blue');">Hover Red</button>



<div class="container3">
<img src=" Kumaratuljaiswal.png" alt=""/ >
</div>

<button class="button2 button3" onclick="chbackcolor('blue');">Hover Red</button>

<footer class="foot">
<span class="colorchage"><kbd> www.kumaratuljaiswal.in | ©Made with Kumar Atul Jaiswal</kbd></span>
</footer>

</body>
</html>

Source Code Download Here