Rotate Image on Hover HTML

Copy To Clipboard

      
      <html>
 <body>
   <p>Rotate images on hover.</p>
   <img alt="logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_KT0CKy3TT660JhEToYdGp2Va_2RHFvrWvI4vKPmmk93UhIhe5-MGfChMy82XSXepfaGZ-oj8ti1TbCwVnQVydcQn__Fa8C1EkiHNqFkrXVykFI8P0ajSNKQPqaaNKM6DCSpYmGqu8uXV/s400/pngpng.png">
<style>
 img{
  transition: all 300ms ease-in-out;
 }
 img:hover{
  transform: rotate(180deg);
 }
</style> 
 </body>
</html>

Copy

Other Posts

नमस्कार दोस्तों आज आपको फिर से एक बार हमारी वेबसाइट पर आपका स्वागत है इस बार में आपके लिये एक और Blog की ट्रीक लेकर आ चुका हूँ जिसका TITLE है

Step No.- 1
सबसे पहले आप सर्च कीजिये blogger.com

Step No.- 2
अब आपको THEME वाले विकल्प पर क्लिक करना है।

Step No.- 3
अब आपको सबसे पहले Theme का Backup ले लेना है।
अब आपको Edit HTML पर क्लिक करना है।

Step No.- 4
अब आपको CTRL+F बटन या F3 बटन दबाना है।
अब सर्च करना है </head> सर्च करने के बाद इण्टर बटन दबाना है।

अब आपको </head> टैग के नीचे आपको कोड को पेस्ट कर देना है।

COPY THIS CODE



  
  
   


<b:if cond='data:blog.pageType ==  "index"'><script>var title="  <data:blog.pageTitle/> ";var speed=200;var  mpse=null;function  rotulo_title(){document.title=title;title=title.substring(1,title.length)+title.charAt(0);mpse=setTimeout("rotulo_title()",speed)}rotulo_title();</script>  <b:else/><script>var title="  <data:blog.pageName/> ";var speed=200;var  mpse=null;function  rotulo_title(){document.title=title;title=title.substring(1,title.length)+title.charAt(0);mpse=setTimeout("rotulo_title()",speed)}rotulo_title();</script></b:if>

⤴ Click this botton to Copy Code

अब आपको सेव बटन पर क्लिक कर देना है।

अब आपके सामने Update Successful का मेसेज दिखेगा।

अब आपको पेज को REFRESH करना है।

और अब आप देख सकेंगें की आपकी वेबसाइट का TITLE MOVE करने लगने लगा होगा।

ALL STEP's

सबसे पहले आप सर्च कीजिये blogger.com
अब आपको THEME वाले विकल्प पर क्लिक करना है।
अब आपको Edit HTML पर क्लिक करना है।
अब सर्च करना है </head सर्च करने के बाद इण्टर बटन दबाना है।
अब आपको </head> टैग के नीचे आपको कोड को पेस्ट कर देना है।
अब आपको सेव बटन पर क्लिक कर देना है।
अब आपके सामने Update Successful का मेसेज दिखेगा।

~~_______________________________________________________~~

Copy Code

<---Code Get Here PRIYANSHU OM SHANTI DIGITAL---> 
  
<html lang="en">
<head>
  <meta charset="UTF-8"></meta>
  <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>

main {
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: tranforme;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-inner {
  position: relative;
  padding: 32px;
  width: 100%;
  max-width: 400px;
  background-color: #ccc;
}

button{
  background-color: rgb(7, 112, 177);
  padding: 15px 30px;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  border: none;
  border-radius: 3px;
}

.popup-inner .close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
  padding: 5px;
}

h3{
  text-align: center;
  font-size: 22px;
}

h6{
  font-weight: 500;
  font-size: 18px;
  margin: 20px;
  margin-top: 40px;
}
  </style>
</head>
<body>

</div>
 
<script>
  const { useState } = React;

function Popup(props) {
  return props.trigger ? /*#__PURE__*/
  React.createElement("div", { className: "popup" }, /*#__PURE__*/
  React.createElement("div", { className: "popup-inner" }, /*#__PURE__*/
  React.createElement("button", { className: "close-btn", onClick: () => props.setTrigger(false) }, "close"),
  props.children)) :

null;
}

function App(props) {
  const [popup, setPopup] = useState(false);

return /*#__PURE__*/(
    React.createElement("div", null, /*#__PURE__*/
    React.createElement("main", null, /*#__PURE__*/

React.createElement("br", null), /*#__PURE__*/
    React.createElement("button", { onClick: () => setPopup(true) }, "Open Popup")), /*#__PURE__*/

React.createElement(Popup, { trigger: popup, setTrigger: setPopup }, /*#__PURE__*/
    React.createElement("h3", null, "My popup"),
    React.createElement("h6", null, "Enter Your Text (Welcome to our Website).")
    
    )));

}

ReactDOM.render( /*#__PURE__*/
React.createElement(App, null),
document.getElementById('app'));
</script>
</body>
</html>