CODEWITHSUNDEEP
angular-material
Lalit Rane
Lalit Rane

Reputation: 890

How can I add md-ink-ripple effect on md-card hover

I need to add hover effect on hovering over the md-card. This effect works just fine on md-list-item (on hovering the item). I need similar effect on md-card. How can I achieve this?

Upvotes: 2

Views: 4811

Answers (2)

camden_kid
camden_kid

Reputation: 12813

Here's a solution using md-list-item to give ink ripple and hover effects to a md-card - CodePen

The trick is to use md-list-item as a parent of the md-card and give it a dummy function for ng-click which activates the effects and some CSS to place the card within the list item. This solution my be a bit over the top but it works.

Markup

<div ng-controller="AppCtrl" ng-cloak="" class="carddemoBasicUsage" ng-app="MyApp">
  <md-content class="md-padding" layout-xs="column" layout="row">
    <md-list-item class="clickCard" ng-click="dummy()">
      <md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch="">
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Click me</span>
         </md-card-title-text>
          <md-card-title-media>
            <div class="md-media-lg card-media"></div>
          </md-card-title-media>
        </md-card-title>
      </md-card>
      </md-list-item>
  </md-content>
</div>

CSS

.clickCard .md-button {
  padding: 0 !important;
}
.clickCard md-card {
  margin: 1px;
}

Upvotes: 2

Lalit Rane
Lalit Rane

Reputation: 890

Adding below class helped at present. Just wondering if there is a better solution than this.

.ripplelink:hover{
    z-index:1000;
  box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
  -webkit-box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
  -moz-box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
}

Upvotes: 3

Related Questions