Rollover Images

Forum|Forum|9 years ago
November 8, 2016
1 reply
777 views

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

This topic has been closed for replies.

Correct answer BenPleysier

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>

BenPleysier

Correct answer

Community Expert

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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded