Blog

https://designshack.net/tutorialexamples/imagehovers/index.html
Hover effect on Images
————————

<!DOCTYPE html>
<!– saved from url=(0063)https://designshack.net/tutorialexamples/imagehovers/index.html –>
<html><head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<meta name=”description” content=”description”>

<title>Image Hovers</title>

<style type=”text/css”>

/*SHRINK*/
.shrink img {
height: 400px;
width: 400px;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.pic:hover {
cursor: pointer;
}
.pic {
height: 300px;
width: 300px;
overflow: hidden;
margin: 20px;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
float: left;
}

.shrink img:hover {
width: 300px;
height: 300px;
}
</style>

</head>

<body>

Image Hover Effects – Return to Design Shack
city

</body></html>

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap CDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js
      https://oss.maxcdn.com/respond/1.4.2/respond.min.js
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    src="js/bootstrap.min.js">
  </body>
</html>

12 Responses to Blog

  1. push12345's avatar push12345 says:
    July 24, 2016 at 1:23 pm

    .testimnials-slider {
    padding: 80px 0;
    position: relative;
    background: url(“1.jpg”) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: 0 0;
    }

    Reply
  2. push12345's avatar push12345 says:
    July 24, 2016 at 1:26 pm

    .video-cta {
    background: url(“../images/bg1.jpg”) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    }

    Reply
  4. push12345's avatar push12345 says:
    July 24, 2016 at 4:48 pm

    p.test {
    width: 11em;
    border: 1px solid #000000;
    word-wrap: break-word;
    }

    Tdfdfsdfdsfsdfsdhis paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

    Reply
  5. push12345's avatar push12345 says:
    July 24, 2016 at 4:49 pm

    div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
    }

    div:hover {
    width: 300px;
    }

    Note: This example does not work in Internet Explorer 9 and earlier versions.

    Hover over the div element above, to see the transition effect.

    Reply
  6. push12345's avatar push12345 says:
    July 24, 2016 at 4:54 pm

    .div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
    }

    .div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
    }

    Both divs are the same size now!

    Hooray!
    Reply
  7. push12345's avatar push12345 says:
    July 24, 2016 at 5:09 pm

    div {
    border: 2px solid;
    padding: 20px;
    width: 300px;
    resize: horizontal;
    overflow: auto;
    }

    Note: Internet Explorer does not support the resize property.

    Let the user resize the width of this div element.
    Reply
  8. push12345's avatar push12345 says:
    July 24, 2016 at 5:23 pm

    training

    ul {list-style: none;padding: 0px;margin: 0px;}
    ul li {display: block;position: relative;float: left;border:1px solid #000}
    li ul {display: none;}
    ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
    white-space: nowrap;color: #fff;}
    ul li a:hover {background: #f00;}
    li:hover ul {display: block; position: absolute;}
    li:hover li {float: none;}
    li:hover a {background: #f00;}
    li:hover li a:hover {background: #000;}
    #drop-nav li ul li {border-top: 0px;}

    Reply

Leave a reply to push12345 Cancel reply