Rollover Images

Report · Nov 07, 2016

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

Report · Nov 07, 2016

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>

Wappler, the only real Dreamweaver alternative.

Adobe Community

Rollover Images

1 Correct answer