1 Reply Latest reply on Nov 7, 2016 5:50 PM by BenPleysier

    Rollover Images

    bigdog5000

      Hi Everybody,

       

      I'm using Dreamweaver 2017.  I know how to create two images in a rollover with a link attached, but I want my captions to look similar to the ones on this site i guess it is just a transparent background.  How would you do this? Anybody know of a plugin that might do this?

       

      Thanks

        • 1. Re: Rollover Images
          BenPleysier Adobe Community Professional & MVP

          No plugins or extensions required

           

          This site uses the Bootstrap framework and has added a few extra sytle rules to get the desired effect. The relevant code is as follows

           

          <!doctype html>
          <html>
          
          
          <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta charset="utf-8">
            <title>Untitled Document</title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            <style>
            .market{ background-image:url(https://www.pinchin.com/_images/industrial-callout-img.jpg); background-position:right center; background-repeat:no-repeat; height:200px; margin-bottom:8px; margin-left:4px; margin-right:4px; width:32.6%; width: 32.6%\0/!important; padding:0px 0px 0px 0px!important;}
            .buildings{ background-image:url(https://www.pinchin.com/_images/buildings-callout-img.jpg)!important;}
            .market-text{ font-size:24px; height:200px; color:#FFF; font-weight:300; }
            .market-text-over{  padding:15px 0px 0px 0px; height:70px; position:fixed; bottom:0px;}
          
          
            .market-text-over{ position:absolute; text-align: center; width: 100%!important; margin:auto 0!important;  }
            .market-text .market-over{ color:#FFF; height:200px; position:relative; padding:20px 0px 0px 0px; display:none;}
          
          
            .market-text:hover .market-over { cursor:pointer; height:200px; display:block;
            background: rgb(0, 0, 0);
            background: rgba(0, 0, 0, 0.5)!important;
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
            /*IE 8 Style*/
            background-color:#666\0/!important;
            }
          
          
            .market-text:hover .market-text-over{ 
            display:none;  margin:auto 0!important; background-color:#000; display:none;
            background: rgb(0, 0, 0);
            background: rgba(0, 0, 0, 0.5)!important;
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
            /*IE 8 Style*/
            background-color:#666\0/!important;
            }
          
          
            .alpha {
            background: rgb(0, 0, 0);
            background: rgba(0, 0, 0, 0.5);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
            /*IE 8 Style*/
            background-color:#666\0/!important;
            }
          
          
            .market-blurb { padding:10px 20px 20px 20px; line-height:normal;}
            </style>
          </head>
          
          
          <body>
            <div class="container">
            <div class="row">
            <div class="col-xs-6 col-sm-4 col-md-4 market buildings text-center">
            <div class="market-text">
            <div class="market-text-over alpha"><span class="icon">B</span> Buildings & Real Estate</div>
            <div class="market-over"><span class="icon">B</span> Buildings & Real Estate
            <p class="market-blurb">We understand buildings and real estate management both inside and out.</p>
            <p class="market-btn"><span class="red-btn">READ MORE</span>
            </p>
            </div>
            </div>
            </div>
            </div>
            </div>
          </body>
          
          
          </html>