https://jsbin.com/jaboyeleta/edit?html,css,output
<div class="sub-main">
<button class="button-two"><span>Hover Me</span></button>
</div>
Im pretty newsih at this, and i need help knowing where to place the
snippet of code to link this button to my site, any help? Sorry if this is a silly question to ask here. I tried to find videos.
Try this:
<div class="sub-main">
<a href="https://google.com">
<button class="button-two"><span>Hover Me</span></button>
</a>
</div>
Maybe you can read more about links and another HTML stuff here
Wrap the button in an a tag like so:
<div class="sub-main">
<a href='https://www.google.com'>
<button class="button-two"><span>Hover Me</span></button>
</a>
</div>
Related
I tried to show shopping cart icon always in right side for mobile,tab,desktop using boostrap but it is not working for responsive.How can i show shopping cart icon always right side.
<div class="shopingicons mr-auto">
<a href="cart.html" class="icons-btn d-inline-block bag">
<span class="icon-shopping-bag"></span>
<span class="number">2</span>
</a>
</div>
Demo:https://jsfiddle.net/nvk87are/9/
Add your following code after </ul> tag in the navbar code. I tried it in your code and it worked.
<div style="float:right">
<div class="shopingicons mr-auto">
<a href="cart.html" class="icons-btn d-inline-block bag">
<span class="icon-shopping-bag"></span>
<span class="number">2</span>
</a>
</div>
</div>
Want more help? Reply and ask again
Your navbarResponsive is hidden in responsive mode and in larger view it's showing up and taking the place of your cart icons.
You can swap the position of your #navbarResponsive and the .shoppingicons. screenshot
Here you can check the working-demo
How to use Image overlay in ReactJS? I am making a movie site.
Here is the link : Project
I want to use overlay effect when the user hovers over the image.
When the user hovers over the image I want to show tagline with the overlay effect on the image.
Here is the link I tried : reference
But, it's not working in React.
Here is the code :
In image tag i want to add overlay effect.
<div className="main-description" >
<img src={"https://image.tmdb.org/t/p/w500"+res.poster_path}
className="result- image"/>
<b className="result-titles" >{res.original_title}</b>
<div className="extra-description">
<div className="rating_time_score_container">
<div className="sub-title Rating-data"><b>
Imdb
<span className="details" > {res.vote_average}/10 </span></b></div>
<div className="time-data">
<b><span className="time">
<i className="fa fa-clock-o"></i> </span> <span className="details">
{res.time_str}</span>
</b>
</div>
</div>
</div>
I don't think this has to do with CSS, It would of been nice to have a link to your github but i\I tracked down your code (since its open source) and I took and look. I suggest using a package like this one: https://github.com/ethanselzer/react-hover-observer
or even bootstraps classic react package like this one:
https://react-bootstrap.github.io/components/overlays/
Then what you can do is update the state of your application and add the overlay that way. Hope that helped and good luck with your project
I try to add a sidenav from Angular/Material to my website. All works fine expect the backdrop : it didn't appear on the main page. Find my code here : https://plnkr.co/edit/DMMz9dMoZasfMExWgjSD?p=options (first time using this tools, all advices are welcomed !)
In menu.component.html :
<md-toolbar>
<div class="sidenav-button">
<button type="button" md-icon-button (click)="sidenav.toggle()">
<md-icon>reorder</md-icon>
</button>
</div>
</md-toolbar>
<md-sidenav-container fullscreen class="sidenav-container">
<md-sidenav #sidenav mode="push" class="sidenav left-nav" opened="false">
<md-nav-list>
<a md-list-item>
Home
</a>
<a md-list-item>
Channels
</a>
</md-nav-list>
</md-sidenav>
</md-sidenav-container>
I just copy/paste the example from the official documentation (https://material.angular.io/components/sidenav/overview) with no result..
Thanks
I know it's been months since this question was asked. Just came across it so decided to answer it since no solution was given.
Import one of the angular material theme to your style sheet, doing so should fix the issue.
example - add
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
to your styles.css
https://material.angular.io/guide/theming
I am encoding the link contained in a RSS in this way:
<div class="link">
<span> <%# System.Web.HttpUtility.HtmlEncode(XPath("link").ToString())%> </span>
</div>
the above is returning the link of such rss in text format, for example like this:
http://feedproxy.google.com/~r/EuropeanRailwayReview/~3/0pxP3t3rge8/
but as text not as clickable link.
Is there a way to get it returned as a hyperlink that can be clicked to navigate to the relevant address? Or, even better as something to click without showing the url?
Try this:
<div class="link">
<span> <%# System.Web.HttpUtility.HtmlEncode(XPath("link").ToString())%> </span>
</div>
Or this:
<div class="link">
<span> Link to Article </span>
</div>
I want to edit this picture.
http://2.bp.blogspot.com/-42H3onuga5o/UYs7FXqbSlI/AAAAAAAABHU/Pv2iKLwVl4s/s1600/aboutus.png
I see in the edit blogtemplate html editor:
<li>
<div class='menu-abs-bg background-color'/>
<div class='menu-specs'>
<div class='home-icon'/>
<a href='http://rivadotaku.blogspot.com/' title='Home'>Home</a>
<span>Rivadotaku's Blog</span>
</div><ul/></li>
<li>
How to change the picture? You can see in the www.rivadotaku.blogspot.com, in the right bar.
I just a newbie, i only can edit a picture in this html
<img alt='' src='http://2.bp.blogspot.com/-S0aK8YBRU20/UYzIzLBILSI/AAAAAAAABIY/np2T4NYR9ng/s320/article1.png'/>
<a href='http://www.templateism.com' style='background-color: rgba(108,203,103,.9);'>templateism.com
Please help me, sorry for bad English.
Thank you
I'm not sure about what you are tryng to do. If you just want to show another picture instead of the picture you are showing right now, you have to change the src attribute.
<img alt='' src='http://newlink.com/newimg.png' />